记一次webpack2升级为webpack4的爬坑之路

本文主要是介绍记一次webpack2升级为webpack4的爬坑之路，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        webpack4官方发布以来，很多博主都已经上手开撸了，但是大体都是对着API新配置一份，我今天尝试了一下将我们公司的webpack2项目迁移到webpack4，下面是记录的几个坑。

一、环境准备

    1、node 6.10+

    2、下载webpack4  

 npm install webpack@4 -D

二、根据控制台错误一个一个的修改

问题1、

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.- configuration.module has an unknown property 'loaders'. These properties are valid:

解决1：将webpack.conf.js中的 loaders 改成 rules 。（ps有多少改多少！）

问题2、TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

解决2：网上有很多说是下载 webpack-contrib/html-webpack-plugin 这个官方临时插件解决，但是当我去下的时候发现已经下不了了，很遗憾！

过去的解决办法npm install webpack-contrib/html-webpack-plugin -D

不过现在有了正式版

现在的解决办法npm install html-webpack-plugin@3.2.0 -D

问题3、Cannot read property 'babel' of undefined

解决3：

npm install babel-loader@7 -D

问题4、Cannot read property 'vue' of undefined 

解决4：

npm install vue-loader@14 -D

问题5、Module build failed (from ./node_modules/css-loader/index.js)

解决5：style-loader和css-loader书写位置不能错，并跟新url-loader@1+file-loader@1

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

npm install url-loader@1 -D

npm install file-loader@1 -D

这5个问题弄完之后，项目就可以成功跑起来了，然后需要什么配置再自己看文档添加即可，最后附上我的package.json供大家参考

{"name": "","version": "1.0.0","description": "Resource Sharing Platform","author": "","private": true,"scripts": {"dev": "node build/dev-server.js","start": "node build/dev-server.js","build": "node build/build.js"},"dependencies": {"jquery": "^3.2.1","vue": "^2.2.6","vue-router": "^2.3.1","webpack": "^4.12.0"},"devDependencies": {"autoprefixer": "^6.4.0","babel-core": "^6.0.0","babel-loader": "^7.1.4","babel-plugin-transform-runtime": "^6.0.0","babel-preset-es2015": "^6.0.0","babel-preset-stage-2": "^6.0.0","babel-register": "^6.0.0","clean-webpack-plugin": "^0.1.13","connect-history-api-fallback": "^1.1.0","css-loader": "^0.28.11","eventsource-polyfill": "^0.9.6","express": "^4.13.3","extract-text-webpack-plugin": "^2.0.0","file-loader": "^1.1.11","function-bind": "^1.0.2","glob": "^7.1.1","html-webpack-plugin": "^3.2.0","http-proxy-middleware": "^0.17.2","json-loader": "^0.5.4","opn": "^4.0.2","ora": "^0.3.0","shelljs": "^0.7.4","style-loader": "^0.21.0","url-loader": "^1.0.1","vue-loader": "^15.2.4","vue-resource": "^1.3.1","vue-style-loader": "^4.1.0","vue-template-compiler": "^2.5.16","webpack-cli": "^3.0.6","webpack-dev-middleware": "^1.8.3","webpack-hot-middleware": "^2.12.2","webpack-merge": "^4.1.0"}
}

这篇关于记一次webpack2升级为webpack4的爬坑之路的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---