webpack-merge 策略

对于当前项目webpack配置，我们有如下结构

• webpack.base.js --> 开发、生产都有的配置

• webpack.dev.js --> 仅开发有的配置

• webpack.prod.js --> 仅生成有的配置

前面我们都是将配置写到webpack.base.js文件内，webpack有一个插件，可以将多个配置深度合并，最终生成一份最终版本的配置

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。

在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(模块热替换) 能力的 localhost server。而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

1. webpack-merge

安装

> pnpm add webpack-merge -D

• 配置

webpack.prod.js同理

 // webpack.dev.js
 const { merge } = require('webpack-merge');
 const baseConfig= require('./webpack.base.js');

 module.exports = merge(baseConfig, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
    ...
   },
 });

2. 开发环境基础配置

1）安装 webpack-dev-server开发服务器

pnpm add -D webpack-dev-server

2）配置开发服务器

// webpack.dev.js
...
module.exports = merge(BaseConfig, {
  devServer: {
    port: 8080, // 端口号
    open: true, // 自动打开浏览器
    hot: true, // 热更新 webpack5已经默认支持，可以不用手动配置
    historyApiFallback: true, // 解决history理由模式下刷新页面404时候，重定向到index.html
  },
});

3）配置启动命令

{
    "scripts":{
        "serve": "webpack-dev-server --config build/webpack.dev.js",
        "build": "webpack --config build/webpack.prod.js"
    }
}

3. preview 预览打包产物

在打包后会输出产物，我们想预览打包后的产物，需要有一个静态服务器来帮我们预览，[serve包](服务 - npm)刚好是一个三方服务器，可以用来干这事

pnpm add -D serve

配置preview脚本

{
    "scripts":{
        "serve": "webpack-dev-server --config build/webpack.dev.js",
        "preview": "serve ./dist -l 4000 -s"
    }
}

其中 -l 就是指定监听的端口； -s 用于解决404的时候重定向到index.html的问题

4. 配置 source-map

source-map 的几个关键字含义

• source-map：都含有

• eval：使用eval函数包含模块代码，一般用于来开发模式下

• cheap：不好含列信息，也不包含loader的sourcemap，仅包含行号信息

• module：包含loader的sourcemap

• inline：将.map多为dataURI嵌入，不单独生成map文件

• hidden：生成map文件，但是打包后，在代码中没有sourcemapingURL，一般会生产用于错误收集的场景（前端监控）

• nosources：只能看到文件信息和行信息，不能看到源码

上述的关键字可以组合

一般开发环境为eval-cheap-module-source-map

一般生产不生成sourcemap，若想调试可以生成source-map，但是map文件不能上传到真实的生产环境

若线做线上错误收集（前端监控），需要提供map文件， 可以使用 hidden-source-map

在开发模式下配置

// webpack.dev.js
module.exports = {
   devtool: ''eval-cheap-module-source-map"
}

生产模式下不配置

5. 模块热替换HMR

webpack5里面模块热替换不需要我们做额外的配置，默认已经支持

界面上有几个模块的内容，更新某一个模块的内容，界面上仅会更新这个模块对应的内容，不会更改其他模块内容

若是非要做配置， 可以在devServe中添加

• hot: true

• 在 plugins中添加new webpack.HotModuleReplacementPlugin() 插件

在vue中， 模块热替换的代码官方已经在vue-loader中帮我们做好，默认支持

在react中则需要单独通过第三方插件配置， 否则没有hrm, 只有热更新（更新整个页面而非某个模块）

6. 解除开发模式下的警告

Feature flags VUE_OPTIONS_API, VUE_PROD_DEVTOOLS, VUE_PROD_HYDRATION_MISMATCH_DETAILS are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

根据vue官方提示，可以通过在webpack.base.js中plugins配置全局环境变量，如下所示：

new webpack.DefinePlugin({
  __VUE_OPTIONS_API__: true, // 开启options api 解除控制台警告
  __VUE_PROD_DEVTOOLS__: false, // 生产环境不启用devtools 解除控制台警告
  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ : false, // 禁用生产中水合不匹配的详细警告
}),