释放双眼，带上耳机，听听看~！
使用webpack主要是想因为其优秀的压缩打包功能，之前的配置中只是设置了关于dev环境的启动和运行。但是打包的时候文件并没有变小，也就是没有使用到压缩的配置。
这次会配置相关的压缩以及区分生产环境和开发环境
开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置
使用的是webpack-merge来定义一个通用配置
npm install –save-dev webpack-merge
然后在目录中增加webpack文件夹，里面有这样几个文件
webpack.common.js 是通用配置，一般来说入口，出口，公共加载器都是在这里配置的。webpack.dev.js是dev环境的配置，是需要有devServer配置的；webpack.prod.js是production环境的配置，主要设置压缩打包等配置。
webpack.common.js
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
2const HtmlWebpackPlugin = require('html-webpack-plugin');
3
4module.exports = {
5 entry: {
6 app: './src/index.js'
7 },
8 output: {
9 // filename: 'bundle.js',
10 // 根据入口起点名称动态生成bundle名称
11 filename: '[name].bundle.js',
12 path: path.resolve(__dirname, '../dist'),
13 publicPath: '/'
14 },
15 plugins: [
16 new HtmlWebpackPlugin({template:'./public/index.html'}),
17 ],
18 module: {
19 rules: [
20 {
21 test: /\.jsx?$/,
22 exclude: /node_modules/,
23 use: {
24 loader: 'babel-loader'
25 }
26 },
27 {
28 test: /\.(css|less)$/,
29 use: [
30 'style-loader',
31 'css-loader',
32 'less-loader'
33 ]
34 },
35 {
36 test: /\.(png|svg|jpg|gif)$/,
37 use: [
38 'file-loader'
39 ]
40 },
41 {
42 test: /\.(woff|woff2|eot|ttf|otf)$/,
43 use: [
44 'file-loader'
45 ]
46 }
47 ]
48 }
49}
50
51
webpack.dev.js
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
2const common = require('./webpack.common.js');
3const webpack = require('webpack');
4
5module.exports = merge(common, {
6 devtool: 'inline-source-map',
7 devServer: {
8 // 默认 localhost
9 host: 'localhost',
10 port: 9000,
11 // 实现实时更新，
12 // 告诉dev server 在哪里查找文件
13 contentBase: './dist',
14 // 启动 HMR 热替换
15 // 允许在运行时更新各种模块，而无需进行完全刷新
16 hot: true,
17 // 处理页面强制刷新时路由页面404问题
18 historyApiFallback: true,
19 // 配置easymock代理
20 proxy: {
21 "/api":{
22 changeOrigin: true,
23 target: "https://www.easy-mock.com/mock/5c24adb39a96a934e48de313"
24 }
25 }
26 },
27 plugins: [
28 // 热替换
29 new webpack.HotModuleReplacementPlugin(),
30 ],
31 // 启用相应模式（development,production）下的webpack内置的优化
32 mode: 'development'
33})
34
35
webpack.prod.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
3const common = require('./webpack.common.js');
4const webpack = require('webpack');
5const CleanWepackPlugin = require('clean-webpack-plugin');
6
7module.exports = merge(common, {
8 // 调试源码(debug)和运行基准测试(benchmark tests)
9 // 会生成app.bundle.js.map
10 // devtool: 'source-map',
11 plugins: [
12 new CleanWepackPlugin(['dist']),
13 new UglifyJSPlugin({
14 sourceMap: true
15 }),
16 new webpack.DefinePlugin({
17 'process.env.NODE_ENV': JSON.stringify('production')
18 })
19 ],
20 // 启用相应模式（development,production）下的webpack内置的优化
21 mode: 'production'
22});
23
24
之后在package.json中修改scripts脚本
2
3
4
5
6
7
2 "test": "echo \"Error: no test specified\" && exit 1",
3 "build": "webpack --config=webpack/webpack.prod.js",
4 "start": "webpack-dev-server --config=webpack/webpack.dev.js"
5 }
6
7
通过不同的命令来查看运行情况。
主要是没有实现压缩，在想着实现压缩的时候不如直接区分生产和开发环境吧，执行npm run build之后的dist/app.bundle.js文件果然体积变小了很多。
over~
链接：
- 实践webpack+es6+react+redux+antd构建项目(一) webpack配置
- 实践webpack+es6+react+redux+antd构建项目(二) react，redux，antd引入
- 实践webpack+es6+react+redux+antd构建项目(三) 配置proxy代理
- 项目github地址
关注我获取更多前端资源和经验分享
感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~
