升级webpack4

升级webpack4

最近在折腾公司项目webpack4升级问题，在这里简单介绍下webpack4之后的不同和那些需要注意修改的地方。

先给出webpack官方更新说明链接：
https://github.com/webpack/webpack/releases/tag/v4.0.0

node版本依赖调整

依赖的node环境版本>=6.11.5，已不再支持node 4，建议最佳es6体验node版本更新至8.9.4

//wepback - package.json

 "engines": {
   "node": ">=6.11.5"
 },

mode

webpack新增了mode选项，可配置也可以作为cli参数传递。mode的值如下

选项	描述
development	启用NamedChunksPlugin和NamedModulesPlugin。
production	启用FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和UglifyJsPlugin。
none	退出任何默认优化选项

mode默认值为production

webpack4之前需要配置很多东西，但是4之后新增了默认项，实际上我们可以不用太关心优化的相关配置，因为–mode production配置会开启所有的优化插件，我们应该更关心配置业务相关的entry,output,module。

plugins变化

You no longer need to use these plugins:
NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (on by default in production mode)
ModuleConcatenationPlugin -> optimization.concatenateModules (on by default in production mode)
NamedModulesPlugin -> optimization.namedModules (on by default in develoment mode)
CommonsChunkPlugin was removed -> optimization.splitChunks, optimization.runtimeChunk

1.bye commonchunk

commonChunkPlugin已经被移除，之前需要通过配置两次来分别获取vendor和manifest的方式做了整合，直接在optimization中配置splitChunks和runtimeChunk即可

before

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: 3
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity
}),

after

optimization:{
   runtimeChunk: {
     name: 'manifest'
   },
   splitChunks:{
     name: 'vendor',
     chunk: 'all',
     minChunks: 3
   }
 },

2.UglifyjsWebpackPlugin

// mode-production默认开启了，会使用uglifyjs插件最小化捆绑
optimization:{
    minimize:true
}

//如果你确实有特殊需要，同样可以自定义配置
optimization:{
    minimizer: [
      new UglifyJsPlugin({ /* your config */ })
    ]
}

3.bye extract-text-webpack-plugin

extract-text-webpack-plugin 在webpack4中被替换成 mini-css-extract-plugin

before

new ExtractTextPlugin({
   filename: runtime === 'local' ? '[name].css' : '[name].[contenthash:7].css'
 })

 loaders: {
           css: ExtractTextPlugin.extract({
             use: 'css-loader',
             fallback: 'vue-style-loader'
           }),
           less: ExtractTextPlugin.extract({
             use: 'css-loader!less-loader',
             fallback: 'vue-style-loader'
           })
         },

after

new MiniCssExtractPlugin({
   filename: runtime === 'local' ? '[name].css' : '[name].[contenthash:7].css'
 })

 rules: [
           {
             test: /\.css$/,
             use: [
               MiniCssExtractPlugin.loader,
               "css-loader"
             ]
           }, {
             test: /\.less/,
             use: [
               MiniCssExtractPlugin.loader,
               "css-loader",
               "less-loader"
             ]
           }
         ],

vue-loader

vue-loader在15之后需要在webpack配置引入当做插件，参考文档，就像这样

const VueLoaderPlugin = require('vue-loader/lib/plugin')

 plugins: [
    new VueLoaderPlugin()
  ],

同时可以去掉vue-loader中的options，Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的 loader。

{
        test: /\.vue$/,
        loader: 'vue-loader',
        <!--options:{-->
        <!--    rules:[-->
        <!--        { -->
        <!--            test: /\.css$/,-->
        <!--            use: [-->
        <!--                MiniCssExtractPlugin.loader,-->
        <!--                "css-loader"-->
        <!--            ]-->
        <!--        }-->
        <!--        ....-->
        <!--    ]-->
        <!--}-->
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: ['node_modules']
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },

其他

package.json配置

"dev": "webpack-dev-server --mode development --progress --hot --hotOnly --config build/webpack.config.js --hide-modules",

"build": "webpack --mode production --progress --config build/webpack.config.js --hide-modules",

其他包的升级

• vue-loader
• vue-style-loader
• webpack-cli
• webpack-dev-server
• file-loader
• css-loader

成果

webpack	2.7.0	4.16.1	提升
大小	(474.27k)parsed	(291.15k)parsed (100.65k)gzipped	38.61%
编译时间	8728ms	5678ms	34.94%