webpack2升级至webpack4的爬坑

一、Node版本更新

node.js >= 8.9.4
【🎈 原则上版本 >=6.11.5即可，但考虑到最佳的es6特性实现，版本最好可以升级到 >= V8.9.4 】

二、npm更新

webpack 升级 (npm i webpack@4 -D)
webpack-cli
webpack-dev-server@3
html-webpack-plugin (npm i html-webpack-plugin@3.2.0 -D)
babel-loader(npm i babel-loader@7 -D)
vue-loader(npm i vue-loader@15 -D)
style-loader 最新
css-loader 最新
vue-style-loader 最新
(如果有sass-loader\less-loader,也更新最新）
url-loader@1
file-loader@1
ts-loader 更新最新
extract-text-webpack-plugin的beta包 (npm i extract-text-webpack-plugin@next -D) 或者 mini-css-extract-plugin

三、配置更改

更加快捷的mode模式优化配置文件

webpack4 提供了development 和 production2个mode值，默认是 production.
有2种配置方法：配置文件中增加mode属性或者从启动命令中参数传递

  // 配置法1：webpack.dev.config.js 配置文件
  module.exports = {
    mode: 'development'
  }
  // 配置法2：package.json 
  // 以前的写法
  "dev" : "set NODE_ENV=development ..."
  // window下直接set会不支持,需要npm i cross-env
  "dev"： “cross-env NODE_ENV=development ...”
  // webpack4
  "dev": "webpack --mode development"
  "build": "webpack --mode production"

设置了mode,运行时会自动将process.env.NODE_ENV的值设为development，无需原有的手动设置或者webpack.DefinePlugin

移除loaders,改rules
vue-loader

前面有讲到vue-loader升级，这边
1、v15 需要以plugin方式添加到webpack配置中

  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  // plugin.push(VueLoaderPlugin )
  module.exports = {
    plugins: [
      new VueLoaderPlugin()
    ]
  }

2、v15版本之后（使用了不同的策略推导.vue文件中各个语言块使用的loader,将各个语言块视为独立的文件，使用webpack中配置了规则的loader处理，由此带来的配置变化就是针对样式处理，webpack.rules中必须显示提供对应loader处理的规则），所以原有vue-loader配置中内联传入的样式相关的loader可以去除

  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
        // v15+版本不再需要内联的cssloader配置
       // 如果不去掉会报错？？（我的项目未去掉也没报错,emmm...😣）
    }
  }

3、鉴于第2点的推导变化，<script><script/>标签内的js代码将被视为独立的js文件并根据webpack配置使用babel-loader转译；因此，如果项目配置babel-loader时使用exclude：/node_modules/排除了依赖包中代码的转译，并且导入了/node_modules/中的.vue文件，<script>部分将不会被转译，故需要将.vue文件加入排除名单中

  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: file => (
       /node_modules/.test(file) && !/\.vue\.js/.test(file)
    )
  }

📌 其他变更可参考vue-loader官方文档：https://vue-loader.vuejs.org/migrating

新的工具代码抽取工具optimization.SplitChunksPlugin(代替CommonChunkPlugin)
- minimize
  默认为true,效果就是压缩js代码（代替以前的webpack.optimize.UglifyJsPlugin）
- minimizer
  可以自定义UglifyJsPlugin和一些配置，默认的压缩为uglifyjs-webpack-plugin 【当使用了OptimizeCSSAssetsPlugin插件，内置的uglifyjs-webpack-plugin插件会失效，这边需要重新配置下UglifyJsPlugin】
```
// 新增css的压缩
minimizer：
    mode === "development"
    ? []
    : [
       new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: mode === "development"
       }),
       new OptimizeCSSAssetsPlugin()
    ]
```
- splitChunks&runtimeChunk
  根据不同的策略来分割打包出来的bundle，具体：webpack splitChunks & runtimeChunk
  （🎈这边配置的chunk记得在HtmlWebpackPlugin中的chunks的对应环境中添上，否则页面不会显示，即不配置页面不会引入这些chunk）
  代码分割提取优化之处：webpack CommonsChunkPlugin 和 SplitChunksPlugin 思路

CSS文件提取插件

mini-css-extract-plugin 替代 extract-text-webpack-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isDEV = process.env.NODE_ENV === 'development'

module.exports = {
  ...
  plugins: [
    new MiniCssExtractPlugin({
      filename: isDEV ? '[name].css':'[name].[contenthash:8].css' ,
    }),
  ],
  module: {
    rules: [
       {
        test: /\.css$/,
        use: [ 
          isDEV ?'style-loader': MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
       ]
    }, 
   }

webpack4：提取、压缩css(公共部分)、消除多余css

五、项目遇到的问题及修改

1、用import()懒加载组件报错

解决方法：安装dynamic-import-webpack的npm包，并在.babelrc配置文件中引入该插件

  // .babelrc
   "plugins": [
      "dynamic-import-webpack"
    ]

2、autoprefixer-loader官网标注deprecated废弃了

autoprefixer: 自动添加css前缀（写css样式时，有时需要加样式前缀以兼容不同的浏览器。手动添加会写较多的重复代码，降低开发效率）
原有项目：autoprefixer-loader
现有方案：postcss-loader + autoprefxer

  // 1、根目录创键一个postcss.config.js
  module.exports= {
    plugins: [
      require('autoprefixer')({
        'browsers': [
          'defaults',
          'defaults',
          'last 2 versions',
          '> 1%',
          'iOS 7',
          'last 3 iOS versions'
        ]
      })
    ]
  }
  // 2、各种css对应loader下加入'postcss-loader'

3、多入口静态static文件夹（图片,js等）的处理

每个入口下有对应的static文件夹，不做处理，将访问不到该文件夹，这边通过CopyWebpackPlugin插件拷贝文件

  function resolve(file) {
    return path.resolve(__dirname,'..',file)
  }
   // 将多入口的相关路径写成对象
   const ENTRIES = {
       entryA: {
           path: './websites/entryA/main', // 入口js
           template:resolve( './websites/entryA/template.ejs'), // 模板
           staticPath:resolve( './websites/entryA/static') // 静态文件存放路径
       },
      ...
    }
    // helper.js
   // entries 是所有的入口js, 即[entryA,entryB,.....]
    function _generateStaticPlugins(entries){
      return Object.keys(entries).map(name => {
        let entry = ENTRIES[name]
        return new CopyWebpackPlugin([
            {
              from:  entry.staticPath,
              to: 'static',
              ignore: ['.*']
            }
        ])
      })
    }

4、公共样式提取缺少配置-导致样式混乱

问题： a入口单独引用的全局样式影响了其他入口的页面样式
原因：命名不对 + 公共样式提取配置漏配

// webpack.base.config.js
styles: {
  name: 'styles',
  test: /\.(sa|sc|le|c)ss$/,
  chunks: 'all',
  enforce: true
}

默认minChunks是1 ，忘记配置，导致a入口单独引用的全局样式成公共样式，被每个入口引用，加上该全局样式用了!important,优先级就大于该页面的scoped 样式

赞赞哇.png

webpack2升级至webpack4的爬坑