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文件和样式编译时长分别是
好歹终于可以正常开发了,但是修改到自己的公共代码时编译速度有待考察。。。。
编译警告但是不影响结果
开发环境去掉mini-css-extract-plugin,仅应用在生产环境
使用更新的dll后
热部署编译时间降为12s以内