一、升级npm run dev

步骤

1、安装webpack webpack-cli

npm i -D webpack@^4.8.3 webpack-cli

参考

• https://www.cnblogs.com/zhensg123/p/11412679.html
• https://www.jianshu.com/p/feb3156316c1
• https://segmentfault.com/a/1190000015237322
  2、升级webpack-dev-server

npm i -D webpack-dev-server@^3.1.4

3、升级vue-loader

npm i -D vue-loader@^15.0.0

4、升级html-webpack-plugin

npm i -D html-webpack-plugin@next

修改配置

chunksSortMode: 'auto'

5、升级url-loader和file-loader
删除package.json文件中的url-loader和file-loader

npm i -D url-loader file-loader

6、删除webpack-dashboard
7、更新babel

npm i -D babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env @babel/plugin-transform-runtime  @babel/polyfill

npm i --save @babel/runtime @babel/runtime-corejs2

删除原有的babel-core、 babel-plugin-transform-runtime、babel-preset-stage-2
修改.babelrc文件

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "plugins":[
      "transform-vue-jsx",
      [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

报错

1、compilation.mainTemplate.applyPluginsWaterfall is not a function
或者DeprecationWarning: Tapable.plugin is deprecated. Use new API on.hooksinstead这个错
安装html-webpack-plugin@next
2、Cannot read property 'fileLoader' of undefined
升级url-loader和file-loader到最新版本，webpack4不兼容低版本的file-loader
3、This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler.
解决方案：
vue与vue-template-compiler版本保持一致
参考：

• https://blog.csdn.net/tangkthh/article/details/103717166
• https://blog.51cto.com/ji123/2065548
  4、node-gyp rebuild
• 方案一：拷贝可以用的项目的node-gyp文件夹，替换node_moudle文件下的node-gyp
• 方案二：

  npm install --global --production windows-build-tools
  npm install --global node-gyp

• 方案三：安装visual studio 2017
  网址：https://docs.microsoft.com/zh-cn/visualstudio/productinfo/vs2017-system-requirements-vs

including the "Desktop development with C++" workload.
注意安装时勾选 包含c++的桌面开发选项就行安装

npm config set msvs_version 2017

5、Unknown word
style-loader: Adds some css to the DOM by adding a <style> tag
https://www.cnblogs.com/tgxh/p/6729271.html

{
   test: /\.css$/,
   use: ['vue-style-loader', 'style-loader', 'css-loader']
},

6、Uncaught ReferenceError: development is not defined vue
https://blog.csdn.net/kingov/article/details/82925539

二、升级npm run build

步骤

1、CommonsChunkPlugin已废弃
替换：https://blog.csdn.net/github_36487770/article/details/80228147
2、extract-text-webpack-plugin已废弃，可以用mini-css-extract-plugin替代

npm i -D mini-css-extract-plugin

配置

new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].css?v=[contenthash:4]'),
  chunkFilename: utils.assetsPath('css/[id].css?v=[contenthash:4]')
})

3、webpack 4 已经废除了 之前 UglifyJsPlugin，用 optimization.minimize 替代
UglifyJsPlugin官网
https://www.npmjs.com/package/uglifyjs-webpack-plugin

用terser-webpack-plugin替换掉uglifyjs-webpack-plugin
https://blog.csdn.net/LLL_liuhui/article/details/103887900

4、prod开启gzip，使用compression-webpack-plugin插件
注意，目前最新版需要运行在webpack4.0以上，如果你的webpack是3.x版本的，请安装compression-webpack-plugin的1.x版本(笔者安装的是1.1.12)。
https://www.cnblogs.com/nianzhilian/p/10229344.html

    productionGzip: true,
    productionGzipExtensions: ['js', 'css']

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')(.*)$'),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

查看页面是否开启gzip
看response headers里面的content-encoding参数值是否是gzip

5、用webpack-bundle-analyzer分析打包代码

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

运行

npm run build --report

访问http://127.0.0.1:8888/，会自动打开
分析规则

• 有哪些依赖被重复打包了
• 哪些是只用了一小部分，却打包了整个
• 哪个包太大了，考虑拆分
  webpack4.splitChunks
  https://www.cnblogs.com/kwzm/p/10314438.html

报错

1、configuration.optimization.splitChunks.cacheGroups['vendor'].minChunks should be a number

CommonsChunkPlugin中的minChunks可以设置为数字、函数和Infinity，默认值是2，并不是官方文档说的入口文件的数量，下面解释下minChunks含义：

• 数字：模块被多少个chunk公共引用才被抽取出来成为commons chunk
• 函数：接受 (module, count) 两个参数，返回一个布尔值，你可以在函数内进行你规定好的逻辑来决定某个模块是否提取成为commons chunk
• Infinity：只有当入口文件（entry chunks） >= 3 才生效，用来在第三方库中分离自定义的公共模块

参考： https://segmentfault.com/a/1190000012828879?utm_source=tag-newest

原来的代码

 minChunks(module) {
            return (
              module.resource &&
              /\.js$/.test(module.resource) &&
              module.resource.indexOf(
                path.join(__dirname, '../node_modules')
              ) === 0
            )
          }

改造后

vendor: {
  name: 'vendor',
  test: /[\/]node_modules[\/]/,
  chunks: 'initial' // 只打包初始时依赖的第三方
}

2、configuration.optimization.splitChunks.cacheGroups['app'] has an unknown property 'async'
configuration.optimization.splitChunks.cacheGroups['app'] has an unknown property 'children'
删除'async'和 'children'属性
3、You may need an additional loader to handle the result of these loaders
https://www.jianshu.com/p/c7597344fec6
https://segmentfault.com/q/1010000014842097
4、Couldn't find preset "@babel/env" relative to directory
参考：

• http://www.hellojava.com/a/40842.html
• https://www.jianshu.com/p/16f323019590

5、DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
出现这个问题的原因是存在已经不维护的组件，常见于extract-text-webpack-plugin组件
解决方法：
这是由于extract-text-webpack-plugin没有提供支持webpack4以上的版本
可以通过安装下一代版本解决

npm i -D extract-text-webpack-plugin@next

6、UnhandledPromiseRejectionWarning: Error: "dependency" is not a valid chunk sort mode
https://www.cnblogs.com/thymeleaf/p/10248708.html

7、打包后的图片路径中出现这种情况[object%20Module]
https://msd.misuland.com/pd/4146263639743012728

  esModule: false

8、本地起node server服务出现404，如果想从根目录访问，设置

app.use(express.static(__dirname))

本地起服务
https://blog.csdn.net/yufengaotian/article/details/86646318
后端服务代理
https://www.npmjs.com/package/express-http-proxy
开启gzip
https://blog.csdn.net/fengyjch/article/details/80859949

const express = require("express")
const compression = require('compression')
const app = express()
const proxy = require('express-http-proxy')
app.use(compression())
app.use('/portal', express.static("www"))
app.use('/', proxy('http://udmssit2.cnsuning.com'))
app.listen(80,()=>{
    console.log("服务开启在80端口")
})

访问路径时，访问域名fedsit2.cnsuning.com/portal