开发环境与生产环境的配置需要分开，因为这两个环境下的构建目标存在着巨大差异：

  • 在开发环境中，我们需要：强大的 source map和一个有着 live reloading（实时重新加载）或 HMR 能力的localhost server；（本质是帮助程序员提高开发效率）
  • 在生产环境中，我们的关注点在于：压缩 bundle、更轻量的source map、资源优化等。通过这些优化方式改善加载时间。（本质上是使代码加载更快）

总结：所以，建议为每个环境编写彼此独立的webpack配置文件。

我的理解：这两种环境下都会打包文件的 只不过一个环境用于程序员调试代码，另一个环境用于上线

撰写3个webpack配置文件

1）webpack.common.js
2）webpack.dev.js
3）webpack.prod.js
我们使用一个 webpack-merge 的 工具，将通用配置与开发环境配置或生产环境配置合并在一起，这样我们就不必再在特定环境的配置中编写重复代码了。

使用webpack-merge 撰写配置文件

image.png

1）首先，安装webpack-merge 文件

npm i webpack-merge -D

2）撰写通用配置文件 - webpack.common.js

在 webpack.common.js 中，我们设置了 entry 和 output 配置，并且在其中引入这两个环境公用的全部插件。

  1.  const path = require('path');
  2.  const HtmlWebpackPlugin = require('html-webpack-plugin');
  4.  module.exports = {
  5.    entry: {
  6.      app: './src/index.js',
  7.    },
  8.    plugins: [
  9.      new HtmlWebpackPlugin({
  10.        title: 'Production',
  11.      }),
  12.    ],
  13.    output: {
  14.      filename: '[name].bundle.js',
  15.      path: path.resolve(__dirname, 'dist'),
  16.      clean: true,
  17.    },
  18.  };

3）撰写开发环境配置文件 - webpack.dev.js

在 webpack.dev.js 中，我们将 mode 设置为 development，并且为此环境添加了推荐的 devtool（强大的 source map）和 devServer 配置

  1.  const { merge } = require('webpack-merge');
  2.  const common = require('./webpack.common.js');
  4.  module.exports = merge(common, {
  5.    mode: 'development',
  6.    devtool: 'inline-source-map',
  7.    devServer: {
  8.      static: './dist',
  9.    },
  10.  });

4）撰写生产环境配置文件 - webpack.prod.js

在 webpack.prod.js 中，我们将 mode 设置为 production

  1.  const { merge } = require('webpack-merge');
  2.  const common = require('./webpack.common.js');
  4.  module.exports = merge(common, {
  5.    mode: 'production',
  6.  });

5）修改 npm scripts指令

现在，我们把 scripts 重新指向到新配置。让 npm start script 中 webpack-dev-server, 使用 webpack.dev.js, 而让 npm run build script 使用 webpack.prod.js:
image.png

6）分别运行 npm run start（开发环境指令）和 npm run build（生产环境指令），查看不同环境下输出结果的变化

图 npm run start 输出结果
image.png
图 npm run build输出结果
image.png