Webpack 开发与生产环境配置详解 (5)

1、webpack开发环境配置

webpack的开发环境配置是单独的文件，因此我们需要合并webpack.base.js文件，可以使用webpack-merge。同时开发环境肯定需要开发服务器 webpack-dev-server

pnpm add webpack-dev-server webpack-merge -D

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

/**
 * @type {import('webpack').Configuration}
 */
const devConfig = {
  mode: 'development', // 开发模式
  devtool: 'eval-cheap-module-source-map', // 开发模式下使用
  devServer: {
    port: 3000, // 端口号
    open: true, // 自动打开浏览器
    historyApiFallback: true, // 解决history路由刷新404问题
    hot: true, // 热更新在webpack5中默认开启，不需要配置
  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(), // 热更新插件
  ],
  stats: 'normal',
}

module.exports = merge(baseConfig, devConfig);

devtool

根据 webpack 官网的文档显示，devtool 的可配置选项一共将近 30 个,无论怎么变化，其实就是下面几个关键的不同处理

关键字	含义
source-map	产生.map 文件
eval	使用 eval 包裹模块代码，一般只用于开发环境
cheap	不包含列信息（关于列信息的解释下面会有详细介绍)也不包含 loader 的 sourcemap
module	包含 loader 的 sourcemap（比如 jsx to js ，babel 的 sourcemap）,否则无法定义源文件
inline	将.map 作为 DataURI 嵌入，不单独生成.map 文件
hidden	生成.map文件，但是打包后的代码中没有sourceMappingURL。一般用于错误收集等场景
nosources	只能看到文件信息和行信息，无法看到源码

这么多不用纠结该怎么选择，webpack官方已经给我们做了推荐：

开发环境

我们在开发环境对 sourceMap 的要求是：快（eval），信息全（module），且由于此时代码未压缩，我们并不那么在意代码列信息(cheap),

所以开发环境比较推荐配置：devtool: eval-cheap-module-source-map

生产环境

一般情况下，我们并不希望任何人都可以在浏览器直接看到我们未编译的源码，devtool:none也就是不设置

所以我们不应该直接提供 sourceMap 给浏览器。但我们又需要 sourceMap 来定位我们的错误信息，可以定义单独的sourceMap文件：devtool:source-map只是用来生产环境测试用，真正的线上环境不上传sourceMap文件

但是，我们希望一方面 webpack 会生成 sourcemap 文件以提供给错误收集工具比如 sentry，另一方面又不会为 bundle 添加引用注释，以避免浏览器使用。可以使用配置：devtool: hidden-source-map

package.json设置脚本

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

DefinePlugin插件

设置前台可访问全局环境值

const webpack = require('webpack');

plugins: [
 ......
  new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false,
  })
],

2、生产环境基础配置

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

/**
 * @type {import('webpack').Configuration}
 */
const prodConfig = {
  mode: 'production', // 生产环境
}

module.exports = merge(baseConfig, prodConfig);

可以使用服务器预览一下打包后的文件

pnpm add serve

package.json设置脚本

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

./dist serve服务地址

-l 4000 监听端口

-s 404页面跳转回index.html