koa+react(四)

react热加载

webpack.config.dev.js

新建开发环境下的webpack.config.dev.js,加入各种loader,开启热加载,下面是对配置的详细注释理解,至于产品环境的配置现在暂时不讲:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval-source-map', // 开发的时候方便调试查看代码
entry: {
main: [
'webpack-dev-server/client?http://localhost:8080', // 监听8080端口socket通信
'webpack/hot/dev-server', // HRM更新时刷新整个页面,如果是only-dev-server是手动刷新
path.join(__dirname, 'app/main.js')
]
},
output: {
filename: 'bundle.js',
publicPath: 'http://localhost:8080/build/', // webpack-dev-server伺服的文件是相对publicPath这个路径的
chunkFilename: '[name].chunk.js'
},
resolve: {
// 定义了解析模块路径时的配置,常用的就是extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.jsx?$/,
exclude: /node_modules/, //可以使用exclude来排除一部分文件
loader: 'babel' // 这里热加载的时候需要把react-hot-loader/babel加到.babelrc文件的plugin里面
},
{
test: /\.(jpg|png)$/,
loader: 'url?limit=8192'
},
{// 使用 extract-text-webpack-plugin就可以把样式文件从js中独立抽离出来
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'less-loader')
}
]
},
plugins: [
// NoErrorsPlugin用于保证编译后的代码永远是对的,因为不对的话会自动停掉。
new webpack.optimize.NoErrorsPlugin(),
// OccurenceOrderPlugin的作用是给经常使用的模块分配最小长度的id
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('[name]-[hash].css'),
new webpack.HotModuleReplacementPlugin(),
// 查找相等或近似的模块,避免在最终生成的文件中出现重复的模块
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
};

以上是比较完整的热加载配置,需要注意的是js的loader里面不能放多个loader了,会报错

The Webpack loader is now exported separately.

根据提示在.babelrc里面添加plugins

“react-hot-loader/babel”

启动

修改index.html文件的js加载方式

1
<script src="http://localhost:8080/build/bundle.js"></script>

本地安装webpack-dev-server,主要一定要项目内安装,不能全局安装,否则会报错。

执行语句:

1
$ webpack-dev-server --config webpack.config.dev.js

执行下面的命令:

1
./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --colors

就可以实现热加载啦,现在修改某个组件试试,浏览器会不会自动刷新,再添加某个样式文件试试,就可以使用import或者require来引入css文件啦~~

当然可以把该执行加入package.json里面。

如果您觉得受益了,欢迎打赏鼓励。