webpack4 升级

最新推荐文章于 2024-09-27 10:57:19 发布

yzbyxmx

最新推荐文章于 2024-09-27 10:57:19 发布

阅读量1.1k

点赞数

分类专栏： webpack 文章标签： webpack4 webpack

本文链接：https://blog.csdn.net/u013262823/article/details/88578477

版权

本文记录了从webpack3到webpack4升级过程中遇到的问题和解决方案，包括webpack-dev-server、html-webpack-plugin、vue-loader的升级，以及webpack配置中VueLoaderPlugin的引入、mode的设置、CommonsChunkPlugin替换为splitChunks、extract-text-webpack-plugin替换为mini-css-extract-plugin等。最终成功完成升级。

摘要由CSDN通过智能技术生成

webpack4升级之坑

webpack4出来已经好久，看到之前的vue-cli项目还是基于"webpack": “^3.6.0”,所以参考了一些资料，对webpack3做了升级。

webpack版本升级

"webpack": "^4.29.6"

cnpm i 或者 npm i ，依赖安装，npm run dev 看下效果，出现一堆的错误。不难发现是webpack-dev-server 导致：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

module.js:491
    throw err;
    ^

Error: Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/xumingxing/Desktop/h5-vue/node_modules/webpack-dev-server/bin/webpack-dev-server.js:54:1)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! h5-vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the h5-vue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

紧接着，我们就应该继续升级webpack-dev-server ，我将其升级为最新版本，npm run dev 也出错了。主要是compilation.mainTemplate.applyPluginsWaterfall报错，查了资料是 html-webpack-plugin 版本不兼容导致。同样也可将其升级为最新版：

"webpack-dev-server": "^3.2.1",

//报错主要信息
...es/_punycode@1.4.1@punycode/punycode.js/Users/xumingxing/Desktop/h5-vue/node_modules/html-webpack-plugin/lib/compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
   
                                                  ^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
    at /Users/xumingxing/Desktop/h5-vue/node_modules/html-webpack-plugin/lib/compiler.js:81:51
    at compile (/Users/xumingxing/Desktop/h5-vue/node_modules/_webpack@4.29.6@webpack/lib/Compiler.js:306:11)
    at hooks.afterCompile.callAsync.err

升级html-webpack-plugin

"html-webpack-plugin": "^3.2.0",

升级完成后，我们再继续npm run dev 看下效果：

Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
    at Object.module.exports (/Users/xumingxing/Desktop/h5-vue/node_modules/vue-loader/lib/loader.js:61:17)

 @ ./src/main.js 4:0-24 13:16-19
 @ multi ./node_modules/_webpack-dev-server@3.2.1@webpack-dev-server/client?http://localhost:8081 (webpack)/hot/dev-server.js ./src/main.js