react-hot-webpack-boilerplate

发表于

react-hot-webpack-boilerplate

1、建立项目目录，初始化项目

1
2
3
mkdir react-webpack-temple
cd react-webpack-temple
npm init -y / npm init

当使用npm init时，会让你输入各种项目信息，你可以一路回车。也可以直接使用npm init -y一键完成默认配置，你开心就好。

这时你的文件目录里面会出现一个package.json文件。

2、安装webpack到本地，将它作为项目依赖保存下来

1
npm install webpack --save-dev    // 不建议全局安装，这会将您项目中的 webpack 锁定到指定版本

这里说一下--save-dev和--save的区别：

首先，运行--save-dev时，依赖会安装在devDependencies键下。运行--save时，依赖会安装在dependencies键下。

--save是对生产环境所需依赖的声明。比如：开发应用中使用的框架，库。

--save-dev对开发环境所需依赖的声明。比如：构建工具，测试工具。

当使用npm install时，会下载dependencies和devDependencies中的模块。

当使用npm install --production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

我们可以通过运行下面命令来查看webpack的版本：

1
node_modules/.bin/webpack -v

3、将项目目录结构设置为如下形式

  • /src // “源”代码是用于书写和编辑的代码
    • index.js
    • Component.js
  • /build // “构建”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载
    • bundle.js (自动创建)
    • index.html
  • package.json
  • webpack.config.js

然后再运行：

1
./node_modules/.bin/webpack src/index.js build/bundle.js

就可以自动生成一个bundle.js文件。

4、更改webpack的配置文件

webpack.config.js

1
2
3
4
5
6
7
var path = require('path');
 const config = {
    entry: './src/index.js',   //入口文件路径
}
module.exports = config;

（1）entry（入口起点）

入口起点告诉 webpack从哪里开始，并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件。

单个入口

1
2
3
4
5
const config = {
  entry: './path/to/my/entry/file.js'
};
module.exports = config;

是下面的简写形式：

1
2
3
4
5
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

多个入口

1
2
3
4
5
6
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

每一个入口对应一个index.html。

（2）output（输出）

此选项影响 compilation 对象的输出。output 选项控制 webpack 如何向硬盘写入编译文件。

即使存在多个入口，也只能有一个出口。

单个入口：

1
2
3
4
5
6
7
8
9
{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}
// 写入到硬盘：./build/bundle.js

多个入口：

1
2
3
4
5
6
7
8
9
10
11
12
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'   //__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
  }
}
// 写入到硬盘：./build/app.js, ./build/search.js

5、在项目中安装react，react-dom

1
npm install react react-dom --save

6、编写第一个程序

Component.js

1
2
3
4
5
6
7
8
9
10
import React from 'react';
class Component extends React.Component {
    render() {
        return <div>Hello World!</div>
    }
}
export default Component;

main.js

1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';
import Component from './src/Component.js';
ReactDOM.render(<Component />, document.getElementById('root'));

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

7、安装babel相关依赖

安装 babel 依赖：

1
npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

8、配置loader

因为react会使用es6语法，因此我们需要使用babel-loader将.jsx文件和es6语法转换为浏览器能识别的形式。

修改配置文件：

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var path = require('path');
const config = {
    entry: './src/main.js',   //入口文件路径
    output: {
        filename: 'bundle.js',
        path: __dirname + '/build'
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,   // 一个用于匹配Loader所要处理文件的正则表达式
                loader: 'babel-loader',  // loader的名称
                exclude: /node_modules/, // 可忽略不处理的文件
            }
        ]
    }
}
module.exports = config;

在根目录下新建一个.babelrc文件，用来存储使用的babel规则。

.babelrc

1
2
3
{
    "presets": ["react", "latest"]
}

说明：

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

1
2
3
4
5
6
7
8
9
10
11
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后，将这些规则加入.babelrc。

1
2
3
4
5
6
7
8
{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": []
}

注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc。

9、配置服务启动程序

为了启动程序时更方便，尽使用npm start就能启动程序。我们可以利用如下配置来完成：

首先安装webpack-dev-server

1
npm install webpack-dev-server --save-dev

然后更改package.json文件：

1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --open"   // 使用--open运行npm start后会自动打开网页
},

更改webpack.config.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const config = {
    entry: './src/main.js',   //入口文件路径
    output: {
        filename: 'bundle.js',
        path: __dirname + '/build'
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,   // 一个用于匹配Loader所要处理文件的正则表达式
                loader: 'babel-loader',  // loader的名称
                exclude: /node_modules/, // 可忽略不处理的文件
            }
        ]
    },
    devServer: { 
        contentBase: "./build",  // 设置webpack-dev-server提供服务器的文件夹
        port: 8888,     // 服务器端口
        inline: true    // 实时刷新
    }
}

这个时候就可以用npm start运行了。

10、加载css和文件

1
2
npm install --save-dev style-loader css-loader
npm install --save-dev

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
},

11、安装一些插件来优化开发环境

（1）HtmlWebpackPlugin

实时构建index.html文件，这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。

1
npm install --save-dev html-webpack-plugin

webpack.config.js

1
const HtmlWebpackPlugin = require('html-webpack-plugin');

.babelrc

1
2
3
4
5
"plugins": [
  new HtmlWebpackPlugin({ 
    title: 'Output Management'    //到时候会在控制台输出，可任意设置
  })
]

（2）clean-webpack-plugin

每次构建前清理/build文件夹，保留会使用的文件，清除已经不需要的文件。

1
npm install clean-webpack-plugin --save-dev

webpack.congfig.js

1
const CleanWebpackPlugin = require('clean-webpack-plugin');

.babelrc

1
2
3
"plugins": [
  new CleanWebpackPlugin(['build']),     // build为要被清理的文件夹
]