webpack学习笔记12-生产环境构建

背景

通常，我们在开发一个应用的时候，会有生产环境与开发环境的概念，生产环境中，我们需要体积最小的代码，以及图片等静态文件使用cdn上的服务，开发环境上，需要热更新，source-map等来快速排错，目标不同。

方案

我们可以分别为生产环境与测试环境编写一个配置文件，并且使用webpack-merge来组合通用配置及专属配置。

写法

1. 首先安装webpack-merge

   npm install webpack-merge # 或者yarn add webpack-merge

2. 清理一下文件并新增一个生产与开发环境及通用配置的config文件，webpack.common.js、webpack.dev.js、webpack.prod.js。

          webpack_learn
          |- node_modules
          |- package.json
   -      |- webpack.config.js
   +      |- webpack.common.js
   +      |- webpack.dev.js
   +      |- webpack.prod.js
          |- yarn.lock
          |- src
              |- let.js
              |- get.js
              |- index.js
   -          |- math.js
          |- dist
              |- bundle.js
              |- index.html

修改新增的配置文件内容

webpack.common.js通用文件

+     const path = require('path');
+     const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+     const HtmlWebpackPlugin = require('html-webpack-plugin');
+     
+     module.exports = {
+       entry: {
+         app: './src/index.js'
+       },
+       plugins: [
+         new CleanWebpackPlugin(),
+         new HtmlWebpackPlugin({
+           title: 'Production'
+         })
+       ],
+       output: {
+         filename: '[name].bundle.js',
+         path: path.resolve(__dirname, 'dist')
+       }
+     };

webpack.dev.js开发环境配置文件

+     const merge = require('webpack-merge');
+     const common = require('./webpack.common.js');
+     
+     module.exports = merge(common, {
+       devtool: 'inline-source-map',
+       devServer: {
+         contentBase: './dist'
+       }
+     });

webpack.prod.js生产环境配置文件

+     const merge = require('webpack-merge');
+     const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+     const common = require('./webpack.common.js');
+     
+     module.exports = merge(common, {
+       plugins: [
+         new UglifyJSPlugin()
+       ]
+     });

1. 无论生产环境还是开发环境，都清理dist目录，新建index.html
2. 开发环境基于dist目录建立本地服务器，并添加source-map来快速排错，且使用webpack-merge来合并webpack.common.js通用配置文件中的配置内容
3. 生产环境开启摇树优化tree-shakeing，且使用webpack-merge来合并webpack.common.js通用配置文件中的配置内容

然后修改package.json中的scripts快捷指令

{
  "dependencies": {
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "name": "webpack_learn",
  "sideEffects": false,
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0"
  },
  "scripts": {
-   "build": "webpack",
+   "build": "webpack --config webpack.prod.js",
-   "serve": "webpack-dev-server --open",
+   "serve": "webpack-dev-server --open --config webpack.dev.js",
    "watch": "webpack --watch",
    "dev": "webpack --mode development",
    "product": "webpack --mode production",
    "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明",
    "showColorAndProgress": "webpack --progress --colors",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

然后执行打包指令

npm run serve #也可以yarn serve 运行开发环境
npm run build #也可以yarn build 打包生产环境

可以看到报了个错

ERROR in app.bundle.js from UglifyJs
Unexpected token: name «name», expected: punc «;» [app.bundle.js:91,4]

这个问题在于，UglifyJs对es6语法的解析有问题，需要转成es5后再次打包

webpack.prod.js中增加babel配置

    const merge = require('webpack-merge');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const common = require('./webpack.common.js');
    
    module.exports = merge(common, {
+       module: {
+           rules: [{
+               //里面为匹配的规则
+               test: /\.m?js$/,
+               exclude: /(node_modules|bower_components)/,
+               use: {
+                   loader: 'babel-loader',
+                   options: {
+                       presets: ['@babel/preset-env']
+                   }
+               }
+           }]
+       },
        plugins: [
            new UglifyJSPlugin()
        ]
    });

然后执行打包

npm run build #也可以yarn build 打包生产环境

就打爆了生产版本，经过了tree-shaking的版本