webpack自定義配置的方法及webpack-merge優化

前言：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, {})