webpack4大幅度減少配置成本浮声。為了優(yōu)化打包流程和打包效率礁叔，決定升級(jí)新版本，擁抱新技術(shù)

計(jì)劃步驟：

1. 從現(xiàn)有的一個(gè)項(xiàng)目，找到每個(gè)配置的作用是什么谍肤，以及新舊版本的區(qū)別啦租，然后制定修改方案，同時(shí)埋好日志輸出荒揣，便于排查錯(cuò)誤
2. 打包測(cè)試篷角，修正問(wèn)題

找到每個(gè)配置的作用是什么，以及新舊版本的區(qū)別系任，然后制定修改方案恳蹲，同時(shí)埋好日志輸出，便于排查錯(cuò)誤

為防止不同npm包版本兼容有問(wèn)題俩滥，我們把所有涉及到的包都升級(jí)到最新

先把"webpack": "3.6.0"嘉蕾，升級(jí)到4.39.3

打開項(xiàng)目根目錄下package.json 從scripts下的dev開始分析

webpack-dev-server --config build/webpack.dev.conf.js // 通過(guò)webpack-dev-server啟動(dòng)的本地服務(wù)∷桑看到最新版本webpack-dev-server错忱，需要webpack4，索性把webpack-dev-server升級(jí)到最新版颁糟，把原來(lái)的 "webpack-dev-server": "2.9.1", 改成 "3.8.0" 

分析build/webpack.dev.conf.js文件

引入的插件

const merge = require('webpack-merge') // "webpack-merge": "4.1.0" 升級(jí)到 "4.2.2"
const HtmlWebpackPlugin = require('html-webpack-plugin') // "html-webpack-plugin": "2.30.1" 升級(jí)到 "3.2.0"
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // 最新版不用動(dòng)
const portfinder = require('portfinder') // "portfinder": "1.0.13" 升級(jí) "1.0.23"

引入其他文件const utils = require('./utils')

webpack4航背，ExtractTextPlugin廢棄了，需要換成MiniCssExtractPlugin

const ExtractTextPlugin = require('extract-text-webpack-plugin') // 用于提取css文件 webpack4 不需要用這個(gè)插件棱貌， 換成 mini-css-extract-plugin
// 在工程里搜索 extract-text-webpack-plugin 發(fā)現(xiàn)可能有用到的文件或者包有：
1. /build/utils.js
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
if (options.extract) {
      // return ExtractTextPlugin.extract({
      //   use: loaders,
      //   fallback: 'vue-style-loader'
      // })
      return [
        {
          loader: MiniCssExtractPlugin.loader
        },
        'css-loader'
      ] 
 } 
2. /build/webpack.prod.conf.js
// new ExtractTextPlugin({
new MiniCssExtractPlugin({
3. 包 avg // 未在package.json中出現(xiàn)玖媚，不做處理
4. 包 async // 未在package.json中出現(xiàn)，不做處理
5. 包 css-loader // "css-loader": "0.28.0", 升級(jí)到 "3.2.0"
6. 包 element-ui // "element-ui": "2.3.2", 升級(jí)到2.11.1
7. 包 html-webpack-plugin // 已經(jīng)升級(jí)過(guò)
8. 包 loader-utils // 未在package.json中出現(xiàn)婚脱，不做處理
9. 包 optimize-css-assets-webpack-plugin // "3.2.0",升級(jí)到5.0.3
10. 包 postcss-loader // "postcss-loader": "2.0.8", 升級(jí)到3.0.0
11. 包 sass-loader // 6.0.6今魔，升級(jí)到7.3.1
12. 包 schema-utils // 未在package.json中出現(xiàn)，不做處理
13. 包 svg-sprite-loader // 3.7.3 升級(jí)到4.1.6
14. 包 tabel // 未在package.json中出現(xiàn)障贸，不做處理 
15. 包 ajv // 未在package.json中出現(xiàn)错森，不做處理 
16. 包 ve-calendar // 沒(méi)有新版本暫時(shí)不處理
17. 包 vue-loader // 13.3.0 升級(jí)到15.7.1
18. 包 vue-resize-directive // 未在package.json中出現(xiàn)，不做處理 
19. 包 webpack-sources // 未在package.json中出現(xiàn)篮洁，不做處理 

引入其他文件const config = require('../config')

根據(jù)不同環(huán)境：develop或者production等采取不同的配置涩维，可能一些配置和webpack4不一致，暫定不需修改袁波。

引入其他文件const baseWebpackConfig = require('./webpack.base.conf')

引入文件 vue-loader.conf瓦阐，用于vue-loader需要的配置，暫定不需修改篷牌。

分析build/webpack.dev.conf.js文件配置的參數(shù)

暫定不需修改

打包測(cè)試睡蟋，修正問(wèn)題

安裝npm包

刪掉node_modules目錄

執(zhí)行npm i

npm WARN element-ui@2.11.1 requires a peer of vue@^2.5.17 but none is installed. You must install peer dependencies yourself.

提示element-ui需要vue@2.5.17，將vue升級(jí)到2.6.10枷颊。重新npm i

npm WARN babel-loader@7.1.1 requires a peer of webpack@2 || 3 but none is installed. You must install peer dependencies yourself.
npm WARN file-loader@1.1.4 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN uglifyjs-webpack-plugin@1.1.1 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

升級(jí)babel-loader到8.0.6戳杀，升級(jí)file-loader到4.2.0该面，webpack4.0已經(jīng)不用uglifyjs-webpack-plugin，直接刪掉信卡。重新npm i

npm WARN babel-loader@8.0.6 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.

升級(jí)babel-core到@babel/core] 7.5.5重新npm i

測(cè)試

npm run dev

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI

# 安裝webpack-cli 
npm install webpack-cli --save-dev

重新npm run dev

ERROR  Failed to compile with 1 errors                             
Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined at Object.module.exports (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint-loader/index.js:155:18)

eslint-loader 1.7.1升級(jí)到3.0.0, 重新npm i

npm WARN eslint-loader@3.0.0 requires a peer of eslint@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

eslint 3.19.0升級(jí)到6.2.2, 重新npm i

npm WARN eslint-plugin-import@2.7.0 requires a peer of eslint@2.x - 4.x but none is installed. You must install peer dependencies yourself.
npm WARN acorn-jsx@5.0.2 requires a peer of acorn@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.

eslint-plugin-import 2.7.0升級(jí)到2.18.2隔缀。

通過(guò)命令npm ls查看整個(gè)包依賴樹，

webpack-bundle-analyzer 引用了acorn@5.7.3坐求，所以把webpack-bundle-analyzer2.9.0升級(jí)到3.4.1

另外一個(gè)引用jest@21.2.0 -> jest-cli -> jest-environment-jsdom -> jsdom -> acorn@4.0.13 所有把jest@21.2.0升級(jí)到24.9.0

重新npm i

還是有警告

npm WARN acorn-jsx@5.0.2 requires a peer of acorn@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.

依賴樹中看到

│ │ ├── UNMET PEER DEPENDENCY acorn@7.0.0
│ │ ├── acorn-jsx@5.0.2

只好手動(dòng)安裝acorn最新版本

npm install acorn --save-dev

重新npm i

沒(méi)有警告

npm run dev

Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read property 'forEach' of undefined
    at Linter.parseResults (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint-loader/dist/Linter.js:121:13)
    at Linter.printOutput (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint-loader/dist/Linter.js:85:26)
    at Object.loader (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint-loader/dist/index.js:26:10)

表面上看不出這個(gè)錯(cuò)誤導(dǎo)致是怎么導(dǎo)致的蚕泽。在/node_modules/eslint-loader/dist/Linter.js的lint(content)函數(shù)中輸出捕獲的錯(cuò)誤.

Failed to load plugin 'html' declared in '.eslintrc.js': eslint-plugin-html error: It seems that eslint is not loaded. If you think it is a bug, please file a report at https://github.com/BenoitZugmeyer/eslint-plugin-html/issues
    at iterateESLintModules (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint-plugin-html/src/index.js:79:11)
    at Object.<anonymous> (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint-plugin-html/src/index.js:21:1)
    at Module._compile (internal/modules/cjs/loader.js:738:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at ConfigArrayFactory._loadPlugin (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint/lib/cli-engine/config-array-factory.js:861:49)

把eslint-plugin-html從3.0.0升級(jí)到6.0.0

npm i

成功升級(jí)eslint-plugin-html

npm run dev

 Cannot find module 'escope'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at monkeypatch (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/babel-eslint/index.js:53:26)
    at Object.exports.parse (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/babel-eslint/index.js:358:5)
    at parse (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint/lib/linter/linter.js:625:29)
    at Linter._verifyWithoutProcessors (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint/lib/linter/linter.js:1067:33)
    at Linter.(anonymous function) (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint-plugin-html/src/index.js:151:21)
    at Linter._verifyWithConfigArray (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint/lib/linter/linter.js:1210:21)
    at Linter.verify (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint/lib/linter/linter.js:1165:25)
    at Linter.verifyAndFix (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint/lib/linter/linter.js:1355:29)
    at verifyText (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/eslint/lib/cli-engine/cli-engine.js:231:48)

babel-eslint版本也比較老，7.1.1換成 10.0.3

npm i

成功升級(jí)babel-eslint

npm run dev

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: .plugins[1][1] must be an object, false, or undefined
    at assertPluginItem (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/validation/option-assertions.js:244:15)
    at arr.forEach (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/validation/option-assertions.js:222:30)
    at Array.forEach (<anonymous>)
    at assertPluginList (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/validation/option-assertions.js:222:9)
    at Object.keys.forEach.key (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/validation/options.js:107:5)
    at Array.forEach (<anonymous>)
    at validateNested (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/validation/options.js:83:21)
    at validate (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/validation/options.js:74:10)
    at file (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-chain.js:174:34)
    at cachedFunction (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/caching.js:33:19)

在/node_modules/@babel/core/lib/config/validation/options.js添加日志輸出

console.log('optLoc--------', optLoc)
console.log('opts--------', opts)
console.log('key-----', key)
    validator(optLoc, opts[key]);
// 報(bào)錯(cuò)的前的輸出是
optLoc-------- { type: 'option',
  name: 'plugins',
  parent: { type: 'root', source: 'babelrcfile' } }
opts-------- { presets: [ [ 'env', [Object] ], 'stage-2' ],
  plugins: [ 'transform-runtime', [ 'component', [Array] ] ],
  env: { test: { presets: [Array], plugins: [Array] } } }
key----- plugins
// 是babelr配置文件出問(wèn)題了桥嗤，這里應(yīng)該是babel修改配置規(guī)則了，plugins里的元素不能是數(shù)組了

修改.babelrc文件

"plugins": ["transform-runtime", ["component", [
  {
    "libraryName": "element-ui"
  }
]]]
改為    
"plugins": ["transform-runtime", "component": [
  {
    "libraryName": "element-ui"
  }
]]

npm run dev

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/babel-preset-stage-2/lib/index.js
    at createDescriptor (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/config-chain.js:120:22)
    at loadPrivatePartialConfig (/Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/@babel/core/lib/config/partial.js:85:55)

先將babel-preset-stage-2從6.22.0升級(jí)到6.24.1

npm i

成功升級(jí)babel-preset-stage-2

npm run dev

一樣的錯(cuò)誤

/@babel/core/lib/config/config-chain.js283行添加打印日志

console.log('chain--',  chain)
console.log('op--',  op)
      mergeChainOpts(chain, op);
// 報(bào)錯(cuò)前輸出
chain-- { options: [], presets: [], plugins: [] }
op-- { options:
   { presets: [ [Array], 'stage-2' ],
     plugins: [ 'transform-runtime', [Object] ],
     env: { test: [Object] } },
  plugins: [Function: plugins],
  presets: [Function: presets] }

babel-plugin-transform-runtime@6.22.0更新為@babel/plugin-transform-runtime@7.5.5

.babelrc文件中

"plugins": ["transform-runtime", {
 改為
"plugins": ["@babel/plugin-transform-runtime", {

npm i

這里一直報(bào)babel的錯(cuò)仔蝌，把babel的相關(guān)包都做下升級(jí)

"babel-plugin-dynamic-import-node": "1.2.0", => 2.3.0
"babel-plugin-transform-es2015-modules-commonjs": "6.26.0", => 6.26.2
"babel-preset-env": "1.3.2", => 1.7.0
"babel-register": "6.22.0", => 6.26.0
"babel-plugin-component": "0.10.1", => 1.1.1

npm i

npm run dev 一樣的錯(cuò)泛领，在網(wǎng)上找到有將babel-preset-env換成 @babel/preset-env，試下

"babel-preset-env": "1.7.0", => "@babel/preset-env" : "7.5.5",
"babel-register": "6.26.0",  => "@babel/register" : "7.5.5", // 一起改掉
"babel-polyfill": "6.26.0", => "@babel/polyfill" : "7.4.4", // 一起改掉

npm i

npm run dev 依然報(bào)錯(cuò)

臨時(shí)把.babelrc文件簡(jiǎn)化

{
   "presets": ["@babel/preset-env"]
}

npm run dev

報(bào)其他錯(cuò)誤敛惊。

先做下相關(guān)npm包升級(jí)

"vue-template-compiler": "2.5.2", => "2.6.10",
"vue-style-loader": "3.0.1",  => "@babel/register" : "4.1.2", 

依然報(bào)錯(cuò)

有個(gè)老兄說(shuō) webpack4 不兼容vue-loader 15.x.x版本https://www.cnblogs.com/tugenhua0707/p/9695179.html

我也把vue-loader 降低成^14.2.2

之前錯(cuò)誤沒(méi)了渊鞋，只有eslint的錯(cuò)誤

暫時(shí)將/config/index.js中的useEslint設(shè)置成false,

npm run dev

終于跑起來(lái)了

將/config/index.js中的useEslint設(shè)置成true

將eslint相關(guān)的包升級(jí)為最新

"eslint-config-standard": "10.2.1", => "14.1.0",
"eslint-friendly-formatter": "3.0.0",  => "4.0.1", 
"eslint-plugin-node": "5.2.0", => "10.0.0",
"eslint-plugin-promise": "3.5.0",  => "4.2.1", 
"eslint-plugin-standard": "3.0.1",  => "4.0.1", 

npm i

npm run dev 依然報(bào)錯(cuò)，猜測(cè)可能和簡(jiǎn)化.babelrc有關(guān)系

把babelrc中的配置一點(diǎn)點(diǎn)加回來(lái)

{
   "presets": [["@babel/preset-env", {"modules": false}], "stage-2"]
}

npm run dev 依然報(bào)錯(cuò)

查到babel7 stage-2的文章 https://babeljs.io/docs/en/babel-preset-stage-2 發(fā)現(xiàn)babel-preset-stage-2插件需要更換

"babel-preset-stage-2": "6.24.1",  => "@babel/preset-stage-2": "7.0.0", 

npm i

babelrc中的配置修改

{
   "presets": [["@babel/preset-env", {"modules": false}], "@babel/preset-stage-2"]
}

npm run dev , 提示As of v7.0.0-beta.55, we've removed Babel's Stage presets.發(fā)現(xiàn)babel7已經(jīng)移除了stage preset https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

babelrc中去掉@babel/preset-stage-2 并添加pluginx component的結(jié)構(gòu)做了點(diǎn)調(diào)整

{
  "presets": [["@babel/preset-env", {"modules": false}]],
  "plugins": [
    "@babel/plugin-transform-runtime", 
    [ 
      "component",
      {
        "libraryName": "element-ui"
      }
    ]
  ]
}

npm run dev

# 提示錯(cuò)誤信息
These dependencies were not found:
* @babel/runtime/helpers/defineProperty in ./src/router/index.js
...

添加@babel/runtime包

"@babel/runtime": "^7.6.0"

npm i

npm run dev

# 提示錯(cuò)誤信息
These dependencies were not found:
* element-ui/lib/alert/style.css in ./src/element-ui/index.js
* element-ui/lib/aside/style.css in ./src/element-ui/index.js
...

element包導(dǎo)入有問(wèn)題瞧挤，babelrc需要添加styleLibraryName用來(lái)加載樣式文件

{
  "presets": [["@babel/preset-env", {"modules": false}]],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

npm run lint（lint配置在package中）

還是報(bào)錯(cuò)

http://eslint.org/docs/rules/dot-notation  ["children"] is better written in dot notation  
  src/utils/index.js:36:31
...
    1 | <template>
  2 |   <div class="mod-user">
> 3 |     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
    |                     ^
  4 |       <el-form-item>
  5 |         <el-input v-model="dataForm.userName" placeholder="用戶名" clearable></el-input>
  6 |       </el-form-item>

首先先 將 --fix 添加到package中的lint腳步中

"scripts": {
  ...
  "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs --fix",
    ...
},

npm run lint

只剩下vue lint 相關(guān)的錯(cuò)誤

看到.eslintrc.js中锡宋，plugins:[ 'html'] 上有注釋// required to lint *.vue files 查了下eslint-plugin-html插件

發(fā)現(xiàn)

Linting VUE files
Initially, eslint-plugin-vue was using eslint-plugin-html to lint code inside script tags. Since v3, eslint-plugin-vue is using its own parser, so it is incompatible with eslint-plugin-html. You should use eslint-plugin-vue exclusively and remove eslint-plugin-html from your dependencies if you still have it.

原來(lái)用 eslint-plugin-html插件就可以檢測(cè)vue文件，現(xiàn)在更換最新的eslint-plging-vue

// 刪除
"eslint-plugin-html"
// 添加
"eslint-plugin-vue": "^5.2.3",

參考https://vuejs.github.io/eslint-plugin-vue/user-guide/#faq

.eslintrc.js修改plugin

  "plugins": [
    "vue",
-   "html"
  ]

.eslintrc.js修改extends

  extends: ['plugin:vue/essential', 'standard'],

.eslintrc.js修改parserOptions 添加 parser: 'babel-eslint' 這個(gè)是為了給eslint-plugin-vue提供解析 .vue文件中<script>標(biāo)簽中的代碼特恬，因?yàn)?code>eslint-plugin-vue的解析器只解析<template>標(biāo)簽里的內(nèi)容

去掉原來(lái)的parser

- "parser": "babel-eslint",
  parserOptions: {
    sourceType: 'module',
      parser: 'babel-eslint',
  },

npm run lint

僅剩下一些defined but never used的錯(cuò)誤执俩，逐個(gè)更正

npm run lint 成功

.babelrc中添加完剩下的信息

之前的evn配置

"env": {
  "test": {
    "presets": ["env", "stage-2"],
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
  }
}

但是并沒(méi)有地方使用。

babel會(huì) 從按這個(gè)順序找到一個(gè)環(huán)境變量值process.env.BABEL_ENV || process.env.NODE_ENV || "development"

然后用這個(gè)值做為key癌刽，在上面的env配置中找到信息役首，合并到根對(duì)象中指定的選項(xiàng)之上。

但是項(xiàng)目中并沒(méi)有設(shè)置 process.env.BABEL_ENV || process.env.NODE_ENV 的地方显拜，所以不會(huì)解析test里的內(nèi)容衡奥，除非程序運(yùn)行所在電腦上配置BABEL_ENV 環(huán)境變量為test

如果改成新版的形式: 因?yàn)椴恍枰付?stage的preset 所以去掉preset。 plugins里的 transform-es2015-modules-commonjs 改成 @babel/plugin-transform-modules-commonjs远荠，dynamic-import-node不需要改矮固。但是暫時(shí)不用test這些，整個(gè)env配置都先去掉譬淳，后面要在test環(huán)境測(cè)試一些插件档址，再添加上。

開發(fā)環(huán)境修改完畢瘦赫，測(cè)試下生產(chǎn)環(huán)境

npm run build

Error: Cannot find module 'del'

在package.lock文件中搜索這個(gè)模塊辰晕，發(fā)現(xiàn)是webpack-dev-server的依賴，刪除package.lock從新安裝webpack-dev-server

npm run build

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

按官方文檔添加splitChunks

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

npm run build

.scss文件中一些sass的寫法确虱，報(bào)錯(cuò)

比如 雙斜線注釋// 會(huì)報(bào)錯(cuò) 需改成 /* */ 含友； @import 下劃線開頭的scss文件，需要嚴(yán)格寫文件名包括后綴，否則報(bào)錯(cuò)

npm run build

報(bào)錯(cuò)

? building for production.../Users/treePro/develop/X/good_things/common-manage-platform-vue/node_modules/copy-webpack-plugin/dist/index.js:127
                    compilation.contextDependencies.push(context);
                                                    ^

TypeError: compilation.contextDependencies.push is not a function

更新copy-webpack-plugin

"copy-webpack-plugin": "4.0.1", => "copy-webpack-plugin": "5.0.4",

npm i

npm run build 打包成功

本地啟動(dòng)nginx服務(wù)窘问，制定dist目錄位置靜態(tài)服務(wù)目錄

瀏覽器訪問(wèn) http://localhost/index.html 
// 報(bào)錯(cuò)
index.js?t=1568122675619:86 GET http://localhost/1909100108/static/js/manifest.js net::ERR_ABORTED 404 (Not Found)

發(fā)現(xiàn) manifest.js 和 vendor.js 沒(méi)有導(dǎo)出

查了一通

// 去掉 output 里的 chunkFilename: utils.assetsPath('js/[id].js')
// optimization 添加 runtimeChunk
optimization: {
  runtimeChunk: {
      name: "manifest" // 所有生成 chunk 之間共享的運(yùn)行時(shí)文件打包到 manifest
  },  

npm run build 正常h輸出manifest.js 和 vendor.js

刷新頁(yè)面發(fā)現(xiàn)樣式錯(cuò)亂辆童，調(diào)試發(fā)現(xiàn) .vue文件里的scss沒(méi)有提取出來(lái)。猜測(cè)是不是mini-css-extract-plugin的問(wèn)題

發(fā)現(xiàn)/build/utils.js 中有問(wèn)題

return [
  {
    loader: MiniCssExtractPlugin.loader
  },
  'css-loader'
]
// 改成
return [MiniCssExtractPlugin.loader].concat(loaders)

npm run build 刷新頁(yè)面惠赫，正確