webpack3升级到webpack4遇到问题总结_javascript技巧_脚本之家

近期出于品种须求,供给对原来就有的七个vue项目展开webpack3升任到webpack4,此处记录一下总体晋级进度的多少个注重步骤,以至蒙受的难题和缓和方案。

金沙8331网址,webpack4本子也出了相当久了 以前弄过一段时间的升高 后边因为各种原因搁浅了
前些天有硬着头皮进级了一波 yeah 万幸进级成功了

1、更新webpack以致相关联插件,webpack4新扩张插件webpack-cli

先贴一波原先webpack3的github配置

npm i -D webpack webpack-cli webpack-dev-server webpack-merge

ps(作者只是多个菜鸡= = webpack的配置非常的辣鸡 )废话少说 开撸

2、运行npm run dev,报错:Error: webpack.optimize.CommonsChunkPlugin has
been removed, please use config.optimization.splitChunks instead.

1 webpack晋级到4.0版本况兼安装webpack-cli

原因:webpack.optimize.CommonsChunkPlugin
已废弃,修改为webpack.optimize.SplitChunksPlugin

yarn add webpack-cli global
yarn add webpack-cli -D

3、运维报错:Error: Plugin could not be registered at
‘html-webpack-plugin-before-html-processing’. Hook was not found.

假若不对webpack-cli进行安装的话会报错 如下:

原因:webpack升级,html-webpack-plugin未匹配

The CLI moved into a separate package:webpack-cli.Please install
‘webpack-cli’ in addition to webpack itself to use the CLI.->when
using npm: npm install webpack-cli -D->when using yarn: yarn add
webpack-cli -D

解决方案:晋级html-webpack-plugin插件

2 对部分包的相关信任

升高插件到 html-webpack-plugin: “^3.2.0”版本,再度运转,报错

继续yarn run dev yeah!!! 报错了

由来:项目中自定义由于要求,供给对每叁个打包好的html模版都插入一段js,所以依附html-webpack-plugin自定义了一段插件代码,不过该代码供给依附webpack4重新管理一下,参谋官方网址:…

Error: Cannot find module ‘webpack/bin/config-yargs’at
Function.Module._resolveFilename at Function.Module._load at
Module.require at require (internal/module.js:11:18)at Object.
(C:Usershboxs022Desktopwebpack-demowebpack-demonode_moduleswebpack-dev-serverbinwebpack-dev-server.js:54:1)at
Module._compile at Object.Module._extensions..js at Module.load at
tryModuleLoad at Function.Module._load error Command failed with exit
code 1.

第一步:晋级插件 npm i -D
html-webpack-plugin@next;第二部改过自定义代码部分,如图:

化解办法:这几个便是眼前版本的webpack-dev-server不支持webpack4 晋级一波

4、运行报错:Error: Chunk.entrypoints: Use Chunks.groupsIterable and
filter by instanceof Entrypoint instead

yarn add webpack-dev-server@3.1.1 -D //我装的是3.1.1的包

原因:Since webpack v4 the extract-text-webpack-plugin should not be
used for css. Use mini-css-extract-plugin instead.

然则看了挺多材质 只要webpack-dev-server是3.0版本以上好像就合作 灰霾反正作者是3.0.0-阿尔法6因此了

解决: npm install extract-text-webpack-plugin@next;

3 去除commonchunk plugin 改用webpack.optimize.SplitChunksPlugin

只更新extract-text-webpack-plugin或者没用,最棒更新成mini-css-extract-plugin,具体可看第6步

再二次施行yarn run dev 然后又出错了 心里一万个奔腾的野马 不能够啊
硬着头皮看嘛

5、报错:TypeError: Cannot read property ‘vue’ of undefined

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

原因:更新webpack,未更新vue-loader

webpack4打消了相当多api 早前安插拆分公共代码 打包第三方库贼麻烦
然后官方一不做二不停直接裁撤了此前的又捣鼓了那么些webpack.optimize.SplitChunksPlugin

解决:npm i -D vue-loader

下一场关于这几个插件的应用自家也是弄了十分久后边跑去官方的example里面去看了一下才享有头绪,假设您前边大致理解原本的commonchunk
plugin直接去看官方的例证你就懂了
这里贴一下合法的example链接,个中最关键的即是关于什么打包多文本输入的common-chunk-add-vendor-chunk例子,没有多少说放链接直接明了的报告你什么样拆分公用代码以致第三方库。

瞩目:webpack4须求在布署中步入插件的援引才会卓有功能

至于打包runtime代码 webpack4直接调用新的方式 ok 完事

const VueLoaderPlugin = require('vue-loader/lib/plugin');//配置中加入plugins: [ new VueLoaderPlugin()],
 new webpack.optimize.RuntimeChunkPlugin,

切换为mini-css-extract-plugin

至于webpack.optimize.SplitChunksPlugin的详尽用法 小编也贴出来
有意思味的同校能够团结雕刻

"vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.10”,"html-webpack-exclude-assets-plugin": "0.0.7","html-webpack-inline-chunk-plugin": "^1.1.1",
new webpack.optimize.SplitChunksPlugin({ chunks: "initial", // 必须三选一: "initial" | "all" | "async" minSize: 0, // 最小尺寸,默认0 minChunks: 1, // 最小 chunk ,默认1 maxAsyncRequests: 1, // 最大异步请求数, 默认1 maxInitialRequests: 1, // 最大初始化请求书,默认1 name: function () { }, // 名称,此选项可接收 function cacheGroups: { // 这里开始设置缓存的 chunks priority: 0, // 缓存组优先级 vendor: { // key 为entry中定义的 入口名称 chunks: "initial", // 必须三选一: "initial" | "all" | "async" name: "vendor", // 要缓存的 分隔出来的 chunk 名称 minSize: 0, minChunks: 1, enforce: true, maxAsyncRequests: 1, // 最大异步请求数, 默认1 maxInitialRequests: 1, // 最大初始化请求书,默认1 reuseExistingChunk: true // 可设置是否重用该chunk,

9、BaseClient.js?e917:12 Uncaught TypeError: Cannot assign to read only
property ‘exports’ of object ‘#npm run
dev不报错,可是在浏览器张开,调整台报错

终极贴上改造后的webpack.optimize.SplitChunksPlugin的代码

由来,webpack4之后,不容许混用 exports和import

new webpack.optimize.SplitChunksPlugin({ cacheGroups: { default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, //打包重复出现的代码 vendor: { chunks: 'initial', minChunks: 2, maxInitialRequests: 5, // The default limit is too small to showcase the effect minSize: 0, // This is example is too small to create commons chunks name: 'vendor' }, //打包第三方类库 commons: { name: "commons", chunks: "initial", minChunks: Infinity } } }), new webpack.optimize.RuntimeChunkPlugin,

一扫而光: 改进include部分为下面那样

4 升级happypack插件!!!!!

以上正是本文的全部内容,希望对大家的读书抱有利于,也意在我们多都赐教脚本之家。

有关怎么用红字
要是利用了happypack进行三十多线程加快打包的小友人们一定要铭记在心进级happypack
因为自个儿卡在此开了十分久前边看了人家的安插才知晓happypack也不相配供给进行提高泪奔。。。。贴一下即时的荒谬提示

TypeError: Cannot read property ‘length’ of undefined at resolveLoader
(C:Usershboxs022Desktopwebpack-demowebpack-demonode_moduleshappypacklibWebpackUtils.js:138:17)at
C:Usershboxs022Desktopwebpack-demowebpack-demonode_moduleshappypacklibWebpackUtils.js:126:7at
C:Usershboxs022Desktopwebpack-demowebpack-demonode_moduleshappypacknode_modulesasynclibasync.js:713:13

5 剩下的难点超越百分之二十都是因为最近的包与webpack4不宽容这里就径直贴出来了

var outputName =
compilation.mainTemplate.applyPluginsWaterfall(‘asset-path’,
outputOptions.filename, {^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a
functionat
C:Usershboxs022Desktopwebpack-demowebpack-demonode_moduleshtml-webpack-pluginlibcompiler.js:81:51at
compile
(C:Usershboxs022Desktopwebpack-demowebpack-demonode_moduleswebpacklibCompiler.js:240:11)at
hooks.afterCompile.callAsync.err
(C:Usershboxs022Desktopwebpack-demowebpack-demonode_moduleswebpacklibCompiler.js:488:14卡塔尔国杀绝办法:晋级html-webpack-plugin

yarn add webpack-contrib/html-webpack-plugin -D

最后 extract-text-webpack-plugin和sass-loader也亟需开展晋级换代
具体笔者会在最后贴出小编的webpack4 demo 我们望着安装哈

6 最后 配置达成测验一哈

yarn run start ok 效果没难点 看一下创设时间9891ms 相比较图中的webpack3
17161ms

:Usershboxs022Desktopwebpack4>yarn run devyarn run v1.3.2$ set NODE_ENV=dev && webpack-dev-serverHappy[js]: Version: 5.0.0-beta.3. Threads: 6  DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` insteadi 「wds」: Project is running at http://localhost:8072/i 「wds」: webpack output is served from /i 「wds」: Content not from webpack is served from C:Usershboxs022Desktopwebpack4srcHappy[js]: All set; signaling webpack to proceed.Happy[css]: Version: 5.0.0-beta.3. Threads: 6 Happy[css]: All set; signaling webpack to proceed. DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly insteadi 「wdm」: wait until bundle finished: /page/index.htmli 「wdm」: Hash: 1911cfc871cd5dc27acaVersion: webpack 4.1.1Time: 9891msBuilt at: 2018-3-28 18:49:25

yarn run build

ok 第三方库jquery打包到common里了 公共js代码打包进vendor
公共样式也打包进ventor前面分离成vendor.css

目录构造也没难题 模块id也开展了定点

webpack4 是自个儿错觉吗= =

最后贴上webpack4的github链接

如上正是本文的全体内容,希望对大家的学习抱有利于,也指望我们多多关照脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注