VUE項目Webpack3升級為webpack4總結

前言：

2018年8月25號webpack4正式發布，webpack4引入了零配置的概念（實際配置下來還是要寫不少配置）,官方宣傳能夠提升構建速度

webpack3轉webpack4官方說明：

https://webpack.js.org/migrate/4/

涉及文件修改如下：

Build/util.js
Build/webpack.base.conf.js
Build/webpack.dev.conf.js
Build/webpack.prod.conf.js
Build/package.json
升級驗證參照package.json：
升級真對測試運行：npm run dev2、npm run testing、npm run prod

涉及修改內容總結：

一、升級可升級的包

1、Webpack版本升級

2、升級包：extract-text-webpack-plugin、html-webpack-plugin

3、新增包：mini-css-extract-plugin、uglifyjs-webpack-plugin

二、Webpack 4.x 的破壞性變更

失效的插件或loader	類型	功能說明
webpack.optimize.CommonsChunkPlugin	內置插件	功能說明：分離Chunk。將多次出現的代碼統一打包到一個文件中。Vue工程中用來打包vendor
webpack.optimize.UglifyJsPlugin	內置插件	功能：壓縮JS
extract-text-webpack-plugin	Loader	功能：分離文件。將部分代碼或文件提取到單獨文件中。Vue工程里用來分離CSS到指定文件

三、具體相關改動描述

1、首先升級webpack4,我已經升級到4.46.0

npm uninstall webpack
npm install webpack@4 -D

PS：我們這里一步步升級測試，根據報錯提示來更改對應配置。。。

-----------------------------------------------------------------------------------------------------------

運行測試：npm run dev2報錯提示如圖：

報錯原因：是html-webpack-plugin·版本不兼容問題

Webpack3.0

//會出現不兼容問題
"html-webpack-plugin":"^2.30.1"

Webpack4.0

解決方案：升級到最新版

npm i html-webpack-plugin@3-D

-----------------------------------------------------------------------------------------------------------

運行測試：npm run dev2

Ps:正常了，項目起來了

打開個頁面看看：這里頁面中的某個路由，沒實際意義，只為證實項目起來了，這里得配置c盤的host哦。

 

 

參考文檔：https://www.cnblogs.com/planetwithpig/p/11904870.html

在運行下打包命令

運行測試：npm run testing報錯提示如圖：

 

報錯原因：報錯的原因是webpack4已經升級不支持這種寫法了,也就是說不在plugins里面進行操作。而是放在了optimization里面,寫法不變下面貼代碼

解決方法：運行  npm i -D uglifyjs-webpack-plugin@beta 安裝uglifyjsPlugin

Ps：避免build打包出現（ERROR in static/js/vendor.xxxxx.js from UglifyJs）提示。

我們這里安裝uglifyjs-webpack-plugin@beta版本。

原因：由於 UglifyJs 只支持 ES5 而 element-ui 可能引入了一部分 ES6 的寫法，所以導致 webpack 打包失敗。issue 里最后給出的解決方案是用 beta 版本的Uglify-es 來代替 UglifyJs（Beta 版本引入了對 ES2015+）的支持。

 

Webpack3.0

 //Webpack.prod.conf.js原配置如下：

plugins: [
    ......
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true
        },

        sourceMap: true
    }),
    ......
]       

刪除以上new webpack.optimize.UglifyJsPlugin（{}）代碼

Webpack4.0

//Webpack.prod.conf.js修改配置如下：
......
const UglifyJsPlugin=require('uglifyjs-webpack-plugin');
const webpackConfig = merge(baseWebpackConfig, {
    //把plugins里原有的new webpack.optimize.UglifyJsPlugin({})刪除掉
    Plugins:[
         ......
    ],
    optimization:{
　　　　minimizer: [
　　　　　　new UglifyJsPlugin({
　　　　　　　　uglifyOptions: {
　　　　　　　　　　output: {omments: false},
　　　　　　　　　　compress: {
　　　　　　　　　　　　warnings: false,
　　　　　　　　　　　　drop_debugger: true,
　　　　　　　　　　　　drop_console: true
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　sourceMap: true
　　　　　　}),
　　　　],
　　}
})

-----------------------------------------------------------------------------------------------------------

再次運行測試打包命令：npm run testing

又報有新報錯了如下：

報錯原因：

webpack.optimize.CommonsChunkPlugin是原來的插件不能用了，得用config.optimization.splitChunk來代替了，改下配置

Webpack3.0 

//Webpack.prod.conf.js原配置如下：
Plugin:[
　　......
　　

 　　

　　...... ]

刪除以上new webpack.optimize.CommonsChunkPlugin（{}）兩處代碼

Webpack4.0

//Webpack.prod.conf.js修改配置如下：
......
const UglifyJsPlugin=require('uglifyjs-webpack-plugin');
const webpackConfig = merge(baseWebpackConfig, {
//把plugins里原有的new webpack.optimize.UglifyJsPlugin({})刪除掉
    Plugins:[
         ......
    ],
    optimization:{
//從webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk
       splitChunks: {
           chunks: 'async',
           // 大於30KB才單獨分離成chunk
           minSize: 30000,
           maxAsyncRequests: 5,
           maxInitialRequests: 3,
           name: true,
           cacheGroups: {
               default: {
                   priority: -20,
                   reuseExistingChunk: true,
               },
               vendors: {
                   name: 'vendors',
                   test: /[\\/]node_modules[\\/]/,
                   priority: -10,
                   chunks: "all"
               },
               echarts: {
                   name: 'echarts',
                   chunks: 'all',
                   // 對echarts進行單獨優化，優先級較高
                   priority: 20,
                   test: function(module) {
                       var context = module.context;
                       return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >=
                           0)
                   }
               }
           }
     },}
})

-----------------------------------------------------------------------------------------------------------

改完運行命令:npm run dev/dev2/dev3都正常，但運行npm run testing/prod打包報錯了，如下：

Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

報錯原因：

extract-text-webpack-plugin插件廢棄，使用mini-css-extract-plugin插件代替

在之前版本中我們使用extract-text-webpack-plugin來提取CSS文件，不過在webpack 4.x中則應該使用mini-css-extract-plugin來提取CSS到單獨文件中

解決方法：運行  npm i mini-css-extract-plugin@0.9.0 -D

Ps：我認為最新的mini-css-extract-plugin版本有錯誤，所以下載版本0.9.0，對我有用。

//提取CSS到單獨文件相關代碼

Webpack3.0 

//Webpack.prod.conf.js原配置如下：
const utils = require('./utils')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpackConfig = merge(baseWebpackConfig, {    
Plugins:[
　　　　......
       new ExtractTextPlugin({ 
　　　　　　filename: utils.assetsPath('css/[name].[contenthash].css') 
　　　　}),
　　　　......
]

刪除以上new ExtractTextPlugin（{}）相關代碼，替換成MiniCssExtractPlugin 

Webpack4.0

//Webpack.prod.conf.js修改配置如下：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpackConfig = merge(baseWebpackConfig, {    
　　Plugins:[
　　　　......
      new MiniCssExtractPlugin({
        filename: utils.assetsPath('css/[name].[contenthash].css')
      })
　　　　......
　　]
}

//utils.js和webpack.prod.conf.js中注釋extract-text-webpack-plugin相關配置，並添加mini-css-extract-plugin配置

-----------------------------------------------------------------------------------------------------------

再次運行測試打包命令：npm run testing

成功了。

以前是webpack3升級webpack4的方法，已經實踐完成整個過程。。。

--------------------------------------------------------------------------------------------------------

最后運行時還注意到有如下的提示：

提示1：

 

提示2：

No parser and no filepath given, using 'babel' the parser now but this will throw an error in t

he future. Please specify a parser or a filepath so one can be inferred.

可能原因：vue-loader的版本沒跟上其他包的版本導致解析器不運行，還在持續更新。。。

--------------------------------------------------------------------------------------------------------

實測webpack4比webpack3打包文件大小略小一些。。。

速度上webpack4比webpack3快些

如左-3，右-4

 

 

 

 

 

以上為工作總結，實踐親測整理筆記。。。