Explore,CODE

The First React with webpack

Create-React-App 是一个官方提供的脚手架,并且给了很详细的说明文档,教你各种操作;比如如果你想用sass,它会教你怎么做,不知道如何部署,它也告诉你了;甚至还告诉你如何代码美化。

初始化项目

初始化npm项目

PowerShell
mkdir React-webpack
cd React-webpack
yarn init -y

最后一个命令应该已经生成了一个 package.json 文件。这 -y 表示应该使用所有的默认配置。在package.json 文件中,您可以找到配置,稍后安装节点包和脚本。
创建主目录

PowerShell
mkdir build
cd build

在 build 目录创建一个 index.html ,内容如下:

<!DOCTYPE html>
<html>
  <head>
      <title>The First React Webpack Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

div.root:作为 react 根节点。
build.js:为打包后生成的主要文件,即入口。

安装 webpack

我们将使用 webpack 进行打包,webpack-dev-server 进行开发。

切换到根目录:yarn add --dev webpack webpack-dev-server
在根目录添加配置文件 webpack.config.js :

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  devtool: 'inline-source-map',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  devServer: {
    contentBase: "./build",
    port: 9000
  }
}

然后再 package.json 添加一行:

"start": "webpack-dev-server --progress --colors --config ./webpack.config.js"

在 src 目录下添加文件 index.js :

//src/index.js
console.log('hello')

目录结构:

- build
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js

我们现在先来试试 webpack 吧!npm start ,打开浏览器输入 localhost:9000 你将看到控制台输出了 hello 。

安装 babel / 配置 React

webpack 不可缺少的 babel ,通过 Babel ,代码将被转换回 ES5,以便每个没有实现所有ES6功能的浏览器都可以解释它。babel 甚至更进一步。您不仅可以使用 ES6 功能,还可以使用 ES 的下一代功能。
yarn add --dev babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-preset-react
babel-core:babel 核心;
babel-preset-env:es6 转 es5 ;
babel-preset-stage-2:使用更多的实验性功能(例如对象扩展) create-react-app 也有用到;
babel-preset-react:jsx 转 js。
ok,下面配置 babel,编辑 package.json ,添加:

"babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  }

配置 webpack-loader,编辑 webpack.config.js ,添加:

module: {
          rules: [
            {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: ['babel-loader']
            }
          ]
        }

现在所有配置已经完成!!来体验一下吧~

Enjoy it!

安装 react 全家桶:yarn add react react-dom
更改src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';

const Hello = () =><h1>'The First React Webpack'</h1>;

ReactDOM.render(
  <Heloo />,
  document.getElementById('root')
);

yarn start,现在刷新浏览器你能看到 The First React Webpack!!

配置热加载

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。本页面重点介绍实现,而概念页面提供了更多关于它的工作原理以及为什么它有用的细节。
配置热加载能大大减少开发时间。
安装yarn add --dev react-hot-loader
配置webpack.config.js

entry: ['react-hot-loader/patch','./src/index.js'],
//修改入口文件
  devServer: {
    contentBase: "./build",
    port: 9000,
    hot: true//增加此段
  },

更改src/index.js,在最后添加:

module.hot.accept();

再次启动yarn start.
当你更改Hell组件浏览器将会自动刷新为最新结果。

Progressive Web App 支持

yarn add sw-precache-webpack-plugin webpack-manifest-plugin --dev

回复

This is just a placeholder img.