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 [email protected] -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"
}
}