vue-cli中的webpack4一步到位填坑記

時間  2019-11-06
標籤 vue cli webpack4 webpack 一步到位 简体版
原文   原文鏈接

基礎介紹

Webpack也在不斷的優化迭代；截至目前，已經更新至 v4.16.0；在Webpack4這個版本，它在原有基礎上，作了不少優化，也引入了頗多的新特性。在新的版本中，將得到更多模塊類型及對.mjs的支持，更好的默認值、更爲簡潔的模式設置、更加智能的來分割Chunk，還新增的splitChunks來自定義分割代碼塊，諸此等等。在升級至新版Webpack的項目中，在包的構建速度、代碼塊體積&數量、以及運行效率，都會有一個質的飛躍。javascript

所以面對Webpack4優越的功能，將本地項目中從原先的2.7.0一步到位升級至4.16.0，而且相關依賴包以及配置文件須要作相應的修改。css

webpack4.0升級流程

node環境

再也不支持Node4，建議使用高版本node，如下作升級使用的是node v8.11.1和npm v5.6.0html

模塊類型

webpack 4以前，js 是 webpack 中的惟一模塊類型，於是不能有效地打包其它類型的文件。而 webpack 4 則提供了 5 種模塊類型：前端

  • javascript/auto: (webpack 3中的默認類型)支持全部的JS模塊系統：CommonJS、AMD、ESM
  • javascript/esm: EcmaScript 模塊，在其餘的模塊系統中不可用（默認 .mjs 文件）
  • javascript/dynamic: 僅支持 CommonJS & AMD，EcmaScript 模塊不可用
  • json: 可經過 require 和 import 導入的 JSON 格式的數據(默認爲 .json 的文件)
  • webassembly/experimental: WebAssembly 模塊(處於試驗階段，默認爲 .wasm 的文件)

此外，webpack 4 中會默認解析 .wasm, .mjs, .js 和 .json 爲後綴的文件。vue

webpack-cli

升級完webpack4而後直接運行項目打包命令npm run build，會提示你須要安裝webpack-cli/webpack-command，能夠根據本身的須要選擇安裝，本人選擇的是webpack-cli。java

配置更新

mode添加

webpack4默認是經過mode來設置是生產環境仍是開發環境，因此須要在webpack.dev.conf.js和webpack.prod.conf.js增長相應的mode配置項，而且刪除以前設置環境變量的代碼process.env.NODE_ENV = 'production'以及插件配置中設置環境變量的方法，片斷代碼以下：node

// webpack.dev.conf.js
module.exports = merge(baseWebpackConfig, {
  mode: 'development',
  // 省略
  plugins: [
    new webpack.DefinePlugin({
        'process.env': config.dev.env
    }),
  ]
} 

// webpack.prod.conf.js
var webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  // 省略
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
  ]  
}  
複製代碼

注意：new webpack.DefinePlugin是保證瀏覽器腳本中可以訪問process.env變量，以便作相應的邏輯操做webpack

development 模式：git

  • 1.主要優化了增量構建速度和開發體驗
  • 2.process.env.NODE_ENV 的值不須要再定義，默認是 development
  • 3.開發模式下支持註釋和提示，而且支持 eval 下的 source maps

production 模式：github

  • 1.生產環境默認開啓了不少代碼優化（minify，splite等）
  • 2.開發時開啓注視和驗證，而且自動加上了eval devtool
  • 3.生產環境不支持watching，開發環境優化了從新打包的速度
  • 4.默認開啓了Scope hoisting和Tree-shaking（原ModuleConcatenationPlugin）
  • 5.自動設置process.env.NODE_ENV到不一樣環境，也就是不須要DefinePlugin來作這個了
  • 6.若是你給mode設置爲none，全部默認配置都去掉了
  • 7.若是不加這個配置webpack會出現提醒，因此仍是加上吧

mini-css-extract-plugin使用

由於extract-text-webpack-plugin的最新正式版尚未對webpack4.x進行支持，即便是使用extract-text-webpack-plugin@next版本依然會出現報contenthash錯誤，因此仍是建議使用mini-css-extract-plugin，固然這也是官方推薦的。

主要須要修改webpack.prod.conf.js中的插件配置以及loaders加載的工具函數utils.js，修改片斷代碼以下：

// webpack.dev.conf.js
module.exports = merge(baseWebpackConfig, {
  // 省略
  plugins: [
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
  ]
} 

// utils.js
if (options.extract) {
return [
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../../'
    }
  }
  ].concat(loaders)
} else {
  return ['vue-style-loader'].concat(loaders)
}
複製代碼

注意：其中utils.js中配置publicPath主要解決css中引用圖片出現路徑錯誤問題。

optimization配置項

再次運行相關打包命令你會發現有以下提示錯誤，片斷代碼以下：

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
    at Object.get [as CommonsChunkPlugin] (/data/test/node_modules/webpack/lib/webpack.js:159:10)
複製代碼

主要是由於webpack4中刪除了webpack.optimize.CommonsChunkPlugin，而且使用optimization中的splitChunk來替代

主要須要修改webpack.prod.conf.js文件，而且刪除全部webpack.optimize.CommonsChunkPlugin相關代碼，片斷代碼以下：

var webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  entry: {
    charts: ['echarts'],
    vendors: ['vue', 'vuex', 'vue-router', 'moment'],
    iconfonts: ['ga-iconfont']
  },
  // 省略
  optimization: {
    // minimizer: true, // [new UglifyJsPlugin({...})]
    providedExports: true,
    usedExports: true,
    //識別package.json中的sideEffects以剔除無用的模塊，用來作tree-shake
    //依賴於optimization.providedExports和optimization.usedExports
    sideEffects: true,
    //取代 new webpack.optimize.ModuleConcatenationPlugin()
    concatenateModules: true,
    //取代 new webpack.NoEmitOnErrorsPlugin()，編譯錯誤時不打印輸出資源。
    noEmitOnErrors: true,
    splitChunks: {
      // maxAsyncRequests: 1, // 最大異步請求數， 默認1
      // maxInitialRequests: 1, // 最大初始化請求數，默認1
      cacheGroups: {
        // 抽離第三方插件
        commons: {
          // test: path.resolve(__dirname, '../node_modules'),
          chunks: 'all',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    },
}    
複製代碼

test主要是經過正則來匹配entry中配置第三方庫，固然這裏也能夠寫成path.resolve(__dirname, '../node_modules')來匹配項目中node_modules引入的庫文件。

chunks形式有三種取值（若是配置了entry，那麼默認從入口文件中抽離，若是沒有配置entry配置了test，默認按照test中的正則去匹配）我的比較推薦使用all或者async：

  • 當取值all的時候，效果是不論是異步仍是同步，都會將入口entry配置的包公共部分抽離出來，好處就是其餘文件很小，公共文件會只加載一次，不優雅的就是若是enrty配置的包過多會致使一個文件很大。效果基本以下：

  • 當取值async的時候，效果是將入口entry配置的包抽離異步的公共部分，主要是看entry中包的引入方式是否是異步的。效果基本以下：

  • 當取值initial的時候，其實效果不如all和async，就是在初始化的時候，將每一個頁面涉及到的包從各自頁面中的js中抽離出來，而且會根據頁面加載這些分離出來的js文件，對於各頁面公共的js會打包多份。效果基本以下：

sideEffects開啓時能夠剔除無用的模塊，用來作tree-shake。當模塊的package.json中添加該字段時，代表該模塊沒有反作用，也就意味着webpack能夠安全地清除被用於重複導出(re-exports)的代碼。

concatenateModules取代了webpack.optimize.ModuleConcatenationPlugin()插件

noEmitOnErrors取代了new webpack.NoEmitOnErrorsPlugin()插件。

minChunks是split前，有共享模塊的chunks的最小數目 ，默認值是1，但示例裏的代碼在default裏把它重寫成2了，從常理上講，minChunks = 2應該是一個比較合理的選擇吧

注意：webpack.optimize.UglifyJsPlugin如今也不須要了，只須要使用optimization.minimize爲true就行，production mode下面自動爲true，固然若是想使用第三方的壓縮插件也能夠在optimization.minimizer的數組列表中進行配置

html-webpack-plugin升級

建議升級至最新版本@4.0.0-alpha，這裏須要把默認的chunksSortMode: dependency刪除，主要是由於webpack4已經刪除相關的CommonsChunkPluginAPI了。

vue-loader升級

其實這個能夠不須要升級，可是若是升級至15.x版本以上，在使用中須要執行VueLoaderPlugin插件方法，其餘用法跟以前保持一致，片斷代碼以下：

// webpack.prod.conf.js
const { VueLoaderPlugin } = require('vue-loader')
// 省略
plugins: [
    new VueLoaderPlugin(),
]    
複製代碼

須要開啓sourceMap

webpack4會默認提示須要開啓sourceMap，所以只要在相關loader配置中的options配置sourceMap：true便可。

其餘相關包升級

建議把相關loader統一作一次升級，基本升級以下：

  • babel-loader 7.1.5
  • css-loader 1.0.0
  • file-loader 1.1.11
  • less-loader 4.1.0
  • url-loader 1.0.1
  • vue-style-loader 4.1.0
  • vue-template-compiler 2.5.16

完整配置

webpack.dev.conf.js

const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

baseWebpackConfig.output.chunkFilename = '[name].[chunkhash].js';            // 路由js命名 這個拆分路由 模塊依賴腳本文件

module.exports = merge(baseWebpackConfig, {
  mode: 'development',
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  devtool: '#cheap-module-eval-source-map',
  optimization: {
    // minimizer: true,
    providedExports: true,
    usedExports: true,
    //識別package.json中的sideEffects以剔除無用的模塊，用來作tree-shake
    //依賴於optimization.providedExports和optimization.usedExports
    sideEffects: true,
    //取代 new webpack.optimize.ModuleConcatenationPlugin()
    concatenateModules: true,
    //取代 new webpack.NoEmitOnErrorsPlugin()，編譯錯誤時不打印輸出資源。
    noEmitOnErrors: true,
    splitChunks: {
      chunks: 'initial', //'all'|'async'|'initial'(所有|按需加載|初始加載)的chunks
    },
    //提取webpack運行時的代碼
    runtimeChunk: {
      name: 'manifest'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})
複製代碼

webpack.prod.conf.js

const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

var webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  entry: {
    charts: ['echarts'],
    vendors: ['vue', 'vuex', 'vue-router', 'moment'],
    iconfonts: ['ga-iconfont']
  },
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath: './'
  },
  optimization: {
    // minimizer: true,
    providedExports: true,
    usedExports: true,
    //識別package.json中的sideEffects以剔除無用的模塊，用來作tree-shake
    //依賴於optimization.providedExports和optimization.usedExports
    sideEffects: true,
    //取代 new webpack.optimize.ModuleConcatenationPlugin()
    concatenateModules: true,
    //取代 new webpack.NoEmitOnErrorsPlugin()，編譯錯誤時不打印輸出資源。
    noEmitOnErrors: true,
    splitChunks: {
      // maxAsyncRequests: 1, // 最大異步請求數， 默認1
      // maxInitialRequests: 1, // 最大初始化請求書，默認1
      cacheGroups: {
        // test: path.resolve(__dirname, '../node_modules'),
        commons: {
          chunks: 'all',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    },
    //提取webpack運行時的代碼
    runtimeChunk: {
      name: 'manifest'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    // 解決moment語言包問題
    new webpack.ContextReplacementPlugin(
      /moment[\\\/]locale$/,
      /^\.\/(zh-cn)$/
    ),

    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true,
        discardComments: { removeAll: true }
      }
    }),

    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      hash:true,// 防止緩存
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      }
    }),
    new webpack.HashedModuleIdsPlugin(),

    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }])
  ]
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig
複製代碼

注意事項

preload插件報錯

若是在項目中使用了preload-webpack-plugin插件，必須升級至3.0.0-beta.1版本，能夠運行如下命令：

npm i preload-webpack-plugin@next -D
複製代碼

同時須要把html-webpack-plugin插件版本回退到3.2.0才行，而後在配置文件按照如下前後順序添加，片斷代碼以下：

// 省略
plugins: [
  new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
  }),
  new PreloadWebpackPlugin({
    rel: 'prefetch',
  }),
  new PreloadWebpackPlugin({
    rel: 'preload'
  }),
  // 省略
]
複製代碼

html-webpack-plugin-after-emit

升級webpack4以後，在dev環境下，你會發現修改任何代碼會致使整個網頁刷新，並且會報cb is not a function，形成這個緣由是html-webpack-plugin-after-emit插件針對高版本的webpack4和html-webpack-plugin3.2.0已經被棄用了，暫時沒找到替代的插件，能夠暫時先註釋掉這段代碼，代碼在build/dev-server.js中，片斷代碼以下：

compiler.plugin('compilation', function(compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
        hotMiddleware.publish({ action: 'reload' })
        cb()
    })
})
複製代碼

總結

按照以上修改基本能夠完成webpack4的升級，升級完以後，我的感受配置更加簡單，刪除了之前不少繁瑣的插件配置，不少功能webpack4默認就是自帶，通過測試打包速度有了50%多的提高，修改以前打包時間爲143894ms左右，升級完以後，用時基本在58080ms左右，效果基本以下：

再次打包的話，用時基本在27534ms左右，效果基本以下：

2018-07-21補充

關於entry和optimization配置

上文介紹瞭如何在optimization經過定義配合entry進行打包，若是按照以上配置最終打包的確會生成charts、vendors、iconfonts三個js文件，可是對於js大小會有所懷疑，由於大小基本在199 bytes如下，這彷佛有點奇怪，直接打開這三個js看看，代碼以下：

// charts.js
(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{21:function(n,o,p){n.exports=p("K8M1")}},[[21,1,0]]]);
//# sourceMappingURL=charts.2e5cbbfa2a894d2bb5aa.js.map

// iconfonts.js
(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{19:function(n,o,p){n.exports=p("t+cQ")}},[[19,1,0]]]);
//# sourceMappingURL=iconfonts.e90fd0507d501ef81b69.js.map

// vendors.js
(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{20:function(n,o,w){w("oCYn"),w("L2JU"),w("jE9Z"),n.exports=w("wd/R")}},[[20,1,0]]]);
//# sourceMappingURL=vendors.5c535f00ba89522ba93b.js.map
複製代碼

其實這三段js都被一塊兒打成common.js了，因此從項目加載資源的角度來講，以上這三段彷佛是多餘js，那麼該如何刪除這沒用的js呢，其實能夠把entry配置的代碼所有註釋掉，基本以下：

entry: {
  // charts: ['echarts'],
  // vendors: ['vue', 'vuex', 'vue-router', 'moment'],
  // iconfonts: ['ga-iconfont']
}
複製代碼

按照以上修改，就能少打包三個彷佛沒用的js，這個問題感謝咱們前端組的小夥伴發現的。

那麼問題來了，如何才能按照入口文件配置的那樣打成三個js包呢，能夠遵循如下配置，片斷代碼以下：

// 前提是不註釋entry中的代碼

// 省略
optimization: {
  // 省略
  splitChunks: {
    cacheGroups: {
      charts: {
        chunks: 'async',
        minChunks: 2,
        maxInitialRequests: 5,
        minSize: 0, 
        name: 'charts'
      },
      vendors: {
        chunks: 'async',
        minChunks: 2,
        maxInitialRequests: 5,
        minSize: 0, 
        name: 'vendors'
      },
      iconfonts: {
        chunks: 'async',
        minChunks: 2,
        maxInitialRequests: 5,
        minSize: 0, 
        name: 'iconfonts'
      }
    }
  },
  // 省略
}
// 省略
複製代碼

重點看cacheGroups裏面的配置，將原先的commons改爲了三個了，同時chunks須要改爲async，按照這樣打包結果基本以下：

打包速度相關

如下測試速度的項目頁面數是26個頁面，十多個業務組件，一整套組內開發的ui組件庫，以及多個第三方庫。實際時間會受各自項目文件多少影響。

使用HappyPack插件可以提升打包編譯速度，能夠參照如下修改，基本修改以下：

// webpack.base.conf.js
// 在rules中的babel-loader改用happypack中的loader
// 省略
module: {
  rules: [{
    test: /\.js$/,
    loader: 'happypack/loader', // 增長新的HappyPack構建loader
    include: [resolve('src')],
    exclude: /node_modules/,
    options: {
      sourceMap: true,
    }
  }
}    
// 省略

// webpack.prod.conf.js
// 省略
plugins: [
  new HappyPack({
    loaders: [{
      loader: 'babel-loader',
      options: { 
        babelrc: true, 
        cacheDirectory: true 
      }
    }],
    threadPool: happyThreadPool
  })
]    
// 省略
複製代碼

如下是未修改以前打包的所需的時間是26831ms：

修改以後打包速度是20387ms，相比以前減小了近6.5s左右：

經過設置babel-loader中的cacheDirectory屬性也能提升編譯速度，網上不少都是以下設置，可是會報錯，片斷代碼以下：

// 這是錯誤用法，我實測發現報錯
{
  test: /\.js$/,
  loader: 'babel-loader?cacheDirectory=true', // 或者loader: 'babel-loader?cacheDirectory'
  include: [resolve('src')],
  exclude: /node_modules/,
  options: {
    sourceMap: true,
  }
}
複製代碼

其實能夠把cacheDirectory看成一個屬性配置在options中，基本代碼以下：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src')],
  exclude: /node_modules/,
  options: {
    sourceMap: true,
    cacheDirectory: true 
  }
}
複製代碼

增長如上修改，打包速度是20593ms，彷佛跟以前沒有多大變化:

最終通過測試，對於本人項目而言，HappyPack和cacheDirectory效果並不能疊加，使用任意其一，均可以能達到20s全部的時間。

以上就是所有內容，若是有什麼不對的地方，歡迎提issues

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程