多页前端项目webpack 3.x升级到4.x问题小记

Cannot find module '@webassemblyjs/wast-parser'

解决方案：删除node_modules文件夹 使用yarn安装

安装 Vue Loader v15

安装html-webpack-plugin ^3.0.0.6

ValidationError: Dll Reference Plugin Invalid Options

废弃CommonsChunkPlugin和DllReferencePlugin使用optimization.splitChunks

ExtractTextPlugin报错

废弃extract-text-webpack-plugin替换为mini-css-extract-plugin

Module build failed (from ./node_modules/url-loader/index.js):TypeError: Cannot read property 'fileLoader' of undefined

升级file-loader插件到最新

vue单文件中use style tag can't work

ERROR in ./src/settlement/widget/settlement_pre_invoice.vue?vue&type=style&index=0&id=846b2bce&scoped=true&lang=css& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/settlement/widget/settlement_pre_invoice.vue?vue&type=style&index=0&id=846b2bce&scoped=true&lang=css&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (f

项目启动成功但是页面的各类图片都404'src' of img tag become src="[object Module]" in browser

解决方案配置set the esModule option in url-loader to false.

postcss不支持行内注释

不支持行内注释

解决方案：使用postcss-scss转义 将”//“转义成"/*"和"*/"

其他各loader升级

vue-style-loader
file-loader
url-loader
迁移文档参考链接https://vue-loader.vuejs.org/migrating.html

版本升级后编译时间优化

优化前 慢到发指 是版本升级前速度的2倍 热部署还直接栈溢出

超级不能忍的

解决它

optimization中添加缓存分组

common: { // 抽离自己写的公共代码，common这个名字可以随意起
  chunks: "all",
  name: "common", // 任意命名
  minSize: 0, // 只要大小超出设置的这个数值，就生成一个新包
  minChunks: 2,
  priority: 9
},

更改html、vue文件和样式编译时长分别是

编译时长

好歹终于可以正常开发了，但是修改到自己的公共代码时编译速度有待考察。。。。

编译警告但是不影响结果

warning-ConflictingOrder.png

开发环境去掉mini-css-extract-plugin，仅应用在生产环境

使用更新的dll后

热部署编译时间降为12s以内