據說webpack4同比webpack舊版本構建速度提示至少一倍，於是開始webpack升級的嘗試。
webpack4已經出來很長時間了，手頭有一個基於webpack3的微信公眾號項目，在項目的空檔期自己在一個開發分支上做了webpack3向4的遷移。
首先將webpack升級到了4.28.2版本，因為線上項目基於webpack3的版本且為全局安裝，不要求升級而且很穩定，項目也不是很重，所以在這個分支驚進行了局部安裝（tip：看到有的童鞋說webpack的版本沖突的問題，就是升級了webpack之后，為什么在終端查看webpack版本的時候還是全局的，即為升級的版本。這個問題的解決方法是全局安裝高版本的webpack，但是如何遇到像我這樣的情況，不需要全局安裝，那你就局部安裝，雖然輸出的是低版本，但是運行的是node_modules里面的webpack版本,效果如圖：
）。安裝的方法可以升級也可以安裝具體的版本。
webpack4將webpack-cli進行了分離，所以需要單獨安裝。命令行代碼：npm i -D webpack-cli
最基礎的兩個依賴安裝完畢，如果你對webpack4更新之后的一些配置的更新很熟悉的話，可以直接進行配置。否則，你可以跑一下自己的項目，終端會報相應的錯誤，你可以針對性的進行版本遷移。npm run dev的項目可以直接在本地跑起來，當你想看本地build的項目的時候，需要將項目扔到服務器上，這就是為什么你運行了npm run build之后會出現這樣的提示
我將我的項目利用nginx代理放到了服務器上，順利的跑了起來。這樣我們在進行升級到時候就可以同時升級開發和生產環境。
一、以下是我在升級到時候終端報錯，及對應的解決辦法：
Tapable.plugin is deprecated. Use new API on `.hooks` instead
問題原因
extract-text-webpack-plugin目前版本不支持webpack4。
解決方案
使用extract-text-webpack-plugin的最新的beta版
npm install extract-text-webpack-plugin@next
不在維護extract-text-webpack-plugin ，使用mini-css-extract-plugin來提取css
Module build failed: TypeError: Cannot read property 'vue' of undefined
解決方案
Sorry, I forgot update vue-loader@latest
npm install vue-loader@14.2.2
箭頭函數報錯：
在.bablerc文件中presets的參數配置
{
"presets": [
"es2015",
"stage-1"
],
"env": {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
},
"start": {
"presets": [
"react-hmre"
]
}
},
"plugins": ["transform-vue-jsx", "transform-runtime",
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
Vue使用webpack：No parser and no file path given, couldn't infer a parser.
問題出在prettier。
解決方案
vue-loader@13.7.2 和vue-loader@14.2.3是已經修復了，等待發布新版可以解決
npm install prettier@1.12.1 --save-dev
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
解決方案
npm install --save-dev html-webpack-plugin@next
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
解決方案
在webpack.config.js里面
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugin配置里面：new VueLoaderPlugin()
Module parse failed: Unexpected character '@' (286:2)
You may need an appropriate loader to handle this file type.
解決方案 *而且loader的順序要保持為下方的順序，loader的順序為從右到左
{
test: /\.css$/,
use: ['style-loader','css-loader'],
}
Unhandled rejection Error: "dependency" is not a valid chunk sort mode at HtmlWebpackPlugin.sortEntryChunks
解決方案
chunksSortMode: 'none‘
building for production...CssSyntaxError {
name: 'CssSyntaxError',
reason: 'Unknown word',
}
解決方案
vue-loader 必須有vueLoaderConfig
配置選項
use: [{
loader: 'vue-loader',
options: vueLoaderConfig
}],
二、以下是版本升級之后需要注意的地方：
1.vue將style重復打包，將
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
, {
test: /\.css$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],
}
, {
test: /\.styl$/,
use: [
{
loader: 'style-loader!css-loader',
options: {
minimize: true
}
},
'postcss-loader', 'stylus-loader'
]
}
, {
test: /\.ts$/, use: 'ts-loader'
}
這部分rules從webpack.base.conf.js放到webpack.prod.conf.js里面
2.移除CommonsChunkPlugin，用optimization.splitChunks和optimization.runtimeChunk來代替
3添加mode參數
4移除loaders使用rules
5處理css的loader里面要use MiniCssExtractPlugin.loader並且MiniCssExtractPlugin.loader的順序必須在css-loader之前在style-loader之后
三、以下是做的一些優化之后遇到的問題及解決辦法
******file-loader和url-loader的區別是file-loader生成相應的文件並在目錄中顯示，url-loader生成base64編碼不在項目中顯示——性能比較：file-loader生成的項目為534k，url-loader生成的項目為550k（臨時數據）
*******static中的靜態資源不參與到打包當中，適用於經常變更的資源，webpakc將static中的資源直接copy到打包項目中
*******要看本地build之后的項目，要將本地的項目扔到服務器上，可以配置一個nginx代理，代理到本地的build之后的代碼路徑，然后將本地的build的assetsPublicPath的值換做”./”防止找不到路徑，之后就可以訪問本地的打包之后的效果了
*******路由懶加載之后報錯:emitting HtmlWebpackPlugin/Users/payplus/Desktop/workspace/webpack3-4-test/jcbs-web/src/main/webapp/jcbs-w/node_modules/toposort/index.js:35
throw new Error('Cyclic dependency' + nodeRep)
更新html-webpack-plugin的版本npm i --save-dev html-webpack-plugin@next解決了問題
對於webpack4的“零配置”個人還是喜歡創建一個webpack.conf.js來進行一些配置的，webpack也是這么做的，允許開發者自主配置，零配置是為了方便開發者但是只提供相應的api而不懂其中的原理和流程是不利於開發者成長的，純粹看官方文檔和一些博客上面的遷移操作也許達不到自己的需求，畢竟當你不進行升級操作的時候，所有的案例都讀得懂，但是當你升級了webpack之后終端一片夕陽紅的時候，可能會覺得無從下手，希望本文能給你提供一些常見報錯的解決思路或方法，如有其它的相關問題歡迎討論。