webpack自定义配置的方法及webpack-merge优化

Posted 2021-11-10 前端扎啤

前言：vue-cli为我们配置了一些常规的指令和属性，但是现实开发中往往需要更多的配置才能满足某些需求。比如生产环境与开发环境的区分等等…本节记录一下在vue中webpack 的相关知识。

package.json

先看一下package中默认的脚本指令：

• serve
• build
• lint

分别指代了vue-cli-service的对应指令

这里是引用

但是以上只是默认配置的常规项，远远不足以满足现实的开发需求。往往需要探究以下几种方法：

webpack中development和production两种模式的打包

这里主要是对npm run serve 和 npm run build 之间做出区分

serve往往是本地运行的开发模式(development)
build往往是需要打包部署到正式或者测试环境上的(production)

一个简单的需求：开发环境我们希望方便调试，而上线正式我们希望代码被压缩。

这里用到webpack的一个属性devtool：

  devtool: "source-map", // enum
  devtool: "inline-source-map", // 嵌入到源文件中
  devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中
  devtool: "hidden-source-map", // SourceMap 不在源文件中引用
  devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
  devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
  devtool: "eval", // 没有模块映射，而是命名模块。以牺牲细节达到最快。
  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  // 牺牲了构建速度的 `source-map' 是最详细的。

这就需要有不同的webpack的配置文件：

解决思路1：不断更改webpack.config.js的内容

mode: 'development',
devtool: source-map',

mode: 'production',
devtool: 'cheap-module-source-map',

解决思路2：区分webpack配置文件

例如：webpack.dev.js webpack.prod.js两种 ：开发用前者，上线用后者

所以默认的package.json也需要对应指定配置文件

 "scripts": {
    "serve": "vue-cli-service serve --config webpack.dev.js",
    "build": "vue-cli-service build --config webpack.prod.js",
    "lint": "vue-cli-service lint",
  },

对思路2的进一步优化 引入webpack-merge

区分了配置文件其实还有一个可以优化的地方，那就是把dev和prod的配置文件中相同的部分进行提取：
建立一个公共的配置文件webpack.base.js

webpack-merge可以帮助我们引入公共配置进入dev和prod

npm install webpack-merge -D//安装

附主要核心代码：

以dev.config.js举例利用merge合并：

const webpack = require('webpack')
const baseWebpackConfig = require('./webpack.base.conf')//共有的配置
const merge = require('webpack-merge')
//merge 合并
const devWebpackConfig = merge(baseWebpackConfig, {})