webpack開發環境與生產環境配置疑問？

Question

本人使用webpack時間不長，之前跟著教學視頻成功弄出了webpack3的一些配置，然後現在想換成webpack4了，跟著官網手冊的東西進行配置，手冊上的因為版本導致的錯誤，自己多少也改了一些，但是到了區分生產環境和開發環境這裡發現了一些問題。官網推薦的workbox-webpack-plugin在開發環境下莫名沒有用了，還有熱更新也莫名沒有效果了，有沒有大神告訴我究竟哪裡出問題了。代碼和依賴如下：

package.json

webpack.common.js

webpack.start.js

webpack.dev.js

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

Webpack开发环境和生产环境之间的配置差异主要体现在以下几个方面：

1. 优化模式（Optimization）：在开发环境中，为了快速构建和测试应用，通常会启用production或development模式来加快编译速度。而在生产环境中，由于性能压力较大，可能会启用production模式以减少文件大小。

2. 热重载（Hot Module Replacement，HMR）：在开发环境中，由于频繁的组件更新，可能会导致热重载失效。因此，在生产环境中，建议关闭热重载功能。

3. 输出路径（Output Path）：开发环境中可能需要将输出目录设置为dist/，以便于本地调试。而生产环境中，通常将输出目录设置为/dist或者更安全的/public，因为它们通常被部署到服务器上。

4. 模块化策略（Module Configuration）：在开发环境中，你可能需要根据项目需求对模块进行拆分和组合，这可能导致模块加载顺序混乱。在生产环境中，模块化的依赖关系更为重要，确保所有必要的模块都包含在内。

5. 公共代码处理（Common Code Handling）：在开发环境中，可能需要保留一些公共代码，例如全局变量、函数等。这些可以在生产环境下通过合并来管理。

6. 打包模式（Packaging Mode）：在开发环境中，你可能需要根据不同的需求调整打包方式，例如通过合并公共代码、压缩文件等方式来优化资源大小。在生产环境中，通常使用最轻量级的打包方法，以便于更快地发布应用。

基本示例

如果你希望实现上述要求，你可以参考以下代码片段。请注意，这个例子是基于Webpack 4的，如果你正在使用的是其他版本，请相应地修改配置。

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name]-[hash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ],
    optimization: {
      splitChunks: {
        name: 'common'
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

配置说明

• entry：指定要编译的入口脚本。
• output：定义输出文件名以及输出目录。
• module：配置模块相关的规则，包括模块加载器和压缩选项。
• plugins：添加额外的插件，例如热重载、模块合并等。
• optimization：配置优化策略，如模块拆分和压缩。

注意事项

• 在生产环境中，你需要考虑如何处理热点数据（Hot Data），因为开发环境中的热重载可能会影响生产环境。
• 确保在生产环境中正确配置热重载，以免影响应用的稳定性和性能。

总之，对于Webpack开发环境和生产环境的配置，你需要根据你的具体需求来进行调整，确保每个阶段都能达到最佳的表现。