感覺是突然之間，webpack4的消息就滿天飛了，聽說打包速度提高了很多，還有最大的噱頭是實現了零配置，leader有一天就吩咐我說，有時間把我們的項目也升個級唄。好嘞。

1.x到2.x

這次升級跨度比較大，我們是從webpack1.x升級到4.x，因為1.x與2.x相差挺大，所以第一件事，就是先升到2.x，比較大的改動就是loader的配置方式

// 1.xpreLoaders: [ {  test: //.vue$/,  loader: 'eslint',  exclude: /node_modules/  }, {  test: //.js$/,  loader: 'eslint',  exclude: /node_modules/  }],loaders: [ { test: //.vue$/, loader: 'vue' }, { test: //.json$/, loader: 'json' }, { test: //.html$/, loader: 'html' },...]//2.xmodule: {  rules: [  {   test: /.vue$/,   use: 'eslint-loader',   enforce: 'pre', // 對應1.x的preLoaders   exclude: /node_modules/   }, {   test: /.js$/,   use: 'eslint-loader',   enforce: 'pre',   exclude: /node_modules/   },   { test: //.vue$/, use: 'vue-loader' },   { test: //.json$/, use: 'json-loader' },   { test: //.html$/, use: 'html-loader' },  ...  ]},

而且loader一定要寫完整，vue-loader如果只寫vue會報錯。loader還可以通過options進行配置。

{ loader: 'css-loader', options: {  autoprefixer: false }}

舊版的鏈式調用也用數組替代。

1.x

style!postcss!less

2.x

 use: [  "style-loader",  "css-loader",  "less-loader" ]

webpack2.x默認支持es6的模塊，所以在編譯時候沒有必要將它們先轉換CommonJS模塊再處理，babel-preset-es2015-webpack已經支持不轉換模塊中的import和export，只需要設置.babelrc

"presets": [ ["es2015", { "modules": false }]]

另外就是插件的升級，運行時哪個插件報錯就升級哪個插件，屢試不爽。

2.x到4.x

第一步：版本升級

不再支持node 4，可以直接升級到8.x版本 webpack升級

npm install webpack@4 --savenpm install webpack-cli --save // 不要忘記這一點，用來啟動webpack的

插件升級，同理，哪個報錯就升級哪個，除了html-webpack-plugin用下面的方法升級，原因是作者還未來得及升級

npm i webpack-contrib/html-webpack-plugin --save-dev

extract-text-webpack-plugin只有最新的beta版本才支持，所以npm install extract-text-webpack-plugin@next --save-dev

第二步 運行命令中添加 --mode development和--mode production

PS：雖然說webpack 4是零配置，入口默認是src/index.js，出口是dist/