记一次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 [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"
  }
}