现在如果我们想要打包一个生产环境的代码就得需要：
1、更改mode: "production"
2、更改devtool: "cheap-module-source-map"
3、删除Tree Shaking配置

  1. module.exports = {
  2.   // 
  3.   optimization: {
  4.     usedExports: true
  5.   }
  6. }

很繁琐有没有？当我们要在Develoment和Production模式进行区分打包怎么才能简化呢？

分解配置文件

在package.json文件中新增一个命令，使用--config告诉Webpack不同环境的配置文件。

  1. {
  2.   "name": "chapter01",
  3.   "sideEffects": false,
  4.   "version": "1.0.0",
  5.   "description": "",
  6.   "main": "index.js",
  7.   "scripts": {
  8.     "dev": "webpack serve --config webpack.dev.js",
  9.     "build": "webpack --config webpack.prod.js"
  10.   },
  11.   "author": "",
  12.   "license": "ISC",
  13.   "devDependencies": {
  14.     // ...
  15.   },
  16.   "dependencies": {
  17.     // ...
  18.   }
  19. }

新建开发环境的配置文件：

  1. const path = require("path");
  2. const HtmlWebpackPlugin = require("html-webpack-plugin");
  3. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5. module.exports = {
  6.   mode: "development",
  7.   devtool: "eval-cheap-module-source-map",
  8.   entry: "./src/index.js",
  9.   output: {
  10.     filename: "[hash].js",
  11.     path: path.resolve(__dirname, "dist"),
  12.   },
  13.   devServer: {
  14.     contentBase: "./dist",
  15.     open: true,
  16.     hot: true, // 让 webpack-dev-server 开启 module-replacement 的功能
  17.     hotOnly: true, // 即便css样式没有生效也不让浏览器自动刷新页面
  18.   },
  19.   optimization: {
  20.     usedExports: true
  21.   },
  22.   module: {
  23.     rules: [{
  24.       test: /\.jpg|.jpeg|.png$/,
  25.       use: {
  26.         loader: "url-loader",
  27.         options: {
  28.           limit: 54000,
  29.           name: "[name].[ext]",
  30.           outputPath: "/images",
  31.         }
  32.       }
  33.     }, {
  34.       test: /\.scss$/,
  35.       use: ["style-loader", {
  36.         loader: "css-loader",
  37.         options: {
  38.           importLoaders: 2,
  39.           modules: true
  40.         }
  41.       }, "sass-loader", "postcss-loader"]
  42.     }, {
  43.       test: /\.css$/,
  44.       use: ["style-loader", "css-loader", "postcss-loader"]
  45.     }, {
  46.       test: /\.m?js$/,
  47.       exclude: /node_modules/, //  排除node_modules下的代码
  48.       use: {
  49.         loader: "babel-loader"
  50.       }
  51.     }]
  52.   },
  53.   plugins: [
  54.     new HtmlWebpackPlugin({
  55.       template: "./src/index.html"
  56.     }),
  57.     new CleanWebpackPlugin(),
  58.   ]
  59. }

新建生产环境的配置文件：

  1. const path = require("path");
  2. const HtmlWebpackPlugin = require("html-webpack-plugin");
  3. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5. module.exports = {
  6.   mode: "production",
  7.   devtool: "cheap-module-source-map",
  8.   entry: "./src/index.js",
  9.   output: {
  10.     filename: "[hash].js",
  11.     path: path.resolve(__dirname, "dist"),
  12.   },
  13.   module: {
  14.     rules: [{
  15.       test: /\.jpg|.jpeg|.png$/,
  16.       use: {
  17.         loader: "url-loader",
  18.         options: {
  19.           limit: 54000,
  20.           name: "[name].[ext]",
  21.           outputPath: "/images",
  22.         }
  23.       }
  24.     }, {
  25.       test: /\.scss$/,
  26.       use: ["style-loader", {
  27.         loader: "css-loader",
  28.         options: {
  29.           importLoaders: 2,
  30.           modules: true
  31.         }
  32.       }, "sass-loader", "postcss-loader"]
  33.     }, {
  34.       test: /\.css$/,
  35.       use: ["style-loader", "css-loader", "postcss-loader"]
  36.     }, {
  37.       test: /\.m?js$/,
  38.       exclude: /node_modules/, //  排除node_modules下的代码
  39.       use: {
  40.         loader: "babel-loader"
  41.       }
  42.     }]
  43.   },
  44.   plugins: [
  45.     new HtmlWebpackPlugin({
  46.       template: "./src/index.html"
  47.     }),
  48.     new CleanWebpackPlugin(),
  49.   ],
  50. }

这样运行npm run dev就是开发环境且执行开发环境的配置文件，运行npm run prod就是生产环境且执行生产环境的配置文件啦。

优化配置文件

现在虽然可以区分开发环境和生产环境了，但是我们会发现webpack.dev.js和webpack.prod.js有大量相同冗余的代码，我们应该把公共的配置代码抽出来实现公用。

我们需要用到webpack-merge帮助我们进行合并Webpack配置文件的内容，安装：

  1. $ npm install webpack-merge -D

新建webpack.common.js里面存放webpack.dev.js和webpack.prod.js公共的配置：

  1. const path = require("path");
  2. const HtmlWebpackPlugin = require("html-webpack-plugin");
  3. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5. module.exports = {
  6.   entry: "./src/index.js",
  7.   output: {
  8.     filename: "[hash].js",
  9.     path: path.resolve(__dirname, "dist"),
  10.   },
  11.   // optimization 优化
  12.   optimization: {
  13.     usedExports: true
  14.   },
  15.   module: {
  16.     rules: [{
  17.       test: /\.jpg|.jpeg|.png$/,
  18.       use: {
  19.         loader: "url-loader",
  20.         options: {
  21.           limit: 54000,
  22.           name: "[name].[ext]",
  23.           outputPath: "/images",
  24.         }
  25.       }
  26.     }, {
  27.       test: /\.scss$/,
  28.       use: ["style-loader", {
  29.         loader: "css-loader",
  30.         options: {
  31.           importLoaders: 2,
  32.           modules: true
  33.         }
  34.       }, "sass-loader", "postcss-loader"]
  35.     }, {
  36.       test: /\.css$/,
  37.       use: ["style-loader", "css-loader", "postcss-loader"]
  38.     }, {
  39.       test: /\.m?js$/,
  40.       exclude: /node_modules/, //  排除node_modules下的代码
  41.       use: {
  42.         loader: "babel-loader"
  43.       }
  44.     }]
  45.   },
  46.   plugins: [
  47.     // 自动引入打包好的js文件
  48.     new HtmlWebpackPlugin({
  49.       template: "./src/index.html"
  50.     }),
  51.     // 清除dist文件夹
  52.     new CleanWebpackPlugin(),
  53.   ]
  54. }

删除webpack.dev.js冗余的代码，使用webpack-merge进行合并：

  1. const { merge } = require("webpack-merge");
  2. const commonConfig = require("./webpack.common.js");
  4. const devConfig = {
  5.   mode: "development",
  6.   devtool: "eval-cheap-module-source-map",
  7.   devServer: {
  8.     contentBase: "./dist",
  9.     open: true,
  10.     hot: true, // 让 webpack-dev-server 开启 module-replacement 的功能
  11.     hotOnly: true, // 即便css样式没有生效也不让浏览器自动刷新页面
  12.   }
  13. }
  15. module.exports = merge(commonConfig, devConfig);

和上面一样，删除冗余的代码，使用webpack-merge进行合并：

  1. const { merge } = require("webpack-merge");
  2. const commonConfig = require("./webpack.common.js");
  4. const prodConfig = module.exports = {
  5.   mode: "production",
  6.   devtool: "cheap-module-source-map",
  7.   entry: "./src/index.js",
  8. }
  10. module.exports = merge(commonConfig, prodConfig);

到此完美解决。