tags: [组件]
categories: 前端工程化

Node.js

Node.js >= V6

Cli

webpack-cli 需要单独安装

插件

许多插件需要更新到最新的可兼容版本

mode

新特性用来区分环境

module.exports = {
  // ...
  mode: 'production',
}

或者通过命令行Cli命令：--mode production/--mode development

已移除|分离的插件

prod 模式移除的插件

module.exports = {
  // ...
  plugins: [
-    new NoEmitOnErrorsPlugin(),
-    new ModuleConcatenationPlugin(),
-    new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
-    new UglifyJsPlugin()
  ],
}

dev 模式移除的插件

module.exports = {
  // ...
  plugins: [
-    new NamedModulesPlugin()
  ],
}

已经分离的插件

module.exports = {
  // ...
  plugins: [
-    new NoErrorsPlugin(),
-    new NewWatchingPlugin()
  ],
}

再见 CommonsChunkPlugin

webpack 4 Code Splitting 的 splitChunks 配置探索
提取公共代码 webpack4.0 不再使用CommonsChunkPlugin，取而代之的是内置的 optimization.splitChunks ，默认的配置或许可以完全满足你的需求

1、commonchunk配置项被彻底去掉，之前需要通过配置两次 new webpack.optimize.CommonsChunkPlugin 来分别获取 vendor 和 manifest 的通用chunk方式已经做了整合， 直接在optimization中配置 runtimeChunk 和 splitChunks 即可 ，提取功能也更为强大 2、runtimeChunk 可以配置成 true，single 或者对象，用自动计算当前构建的一些基础chunk信息，类似之前版本中的 manifest 信息获取方式。 3、webpack.optimize.UglifyJsPlugin 现在也不需要了，只需要使用 optimization.minimize 为 true 就行，production mode下面自动为 true，当然如果想使用第三方的压缩插件也可以在 optimization.minimizer 的数组列表中进行配置

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

再见 extract-text-webpack-plugin

提取 JS 中的 CSS 代码到单独的文件中 webpack4.0 不再使用 extract-text-webpack-plugin，取而代之的是mini-css-extract-plugin

// webpack.dev.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(le|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      }
    ]
  }
}

// webpack.prod.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
  optimization: {
    minimizer: [
    // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true, // 多线程
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
        canPrint: false
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
           MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      }
    ]
  }
}

import() and CommonJS

当通过 import() 导入 non-esm.js 的结果时，现在你需要通过 default 属性来获取 module.exports 的值

# non-esm.js
module.exports = {
  sayHello: () => {
    console.log('hello world');
  }
};

# example.jsc
function sayHello() {
  import('./non-esm.js').then(module => {
    module.default.sayHello();
  });
}

json and loaders

当用自定义的loader来转换 .json 文件时，需要添加 module.rules.type

module.exports = {
  // ...
  rules: [
    {
      test: /config\.json$/,
      loader: 'special-loader',
+     type: 'javascript/auto',
      options: {...}
    }
  ]
};

如果使用 json-loader ，可以移除

module.exports = {
  // ...
  rules: [
    {
-     test: /\.json$/,
-     loader: 'json-loader'
    }
  ]
};

module.loaders

module.loaders 已移除，被 module.rules 取代

参考资源

更多插件请见 https://webpack.js.org/plugins/
你拆分JS代码的方法可能是错的！

其他升级

1. NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默认情况下处于生产模式）

2. ModuleConcatenationPlugin- > optimization.concatenateModules（默认情况下处于生产模式）

3. NamedModulesPlugin- > optimization.namedModules（在开发模式下默认开启）

4. webpack命令优化 -> 发布了独立的 webpack-cli 命令行工具包

5. webpack-dev-server -> 建议升级到最新版本

6. html-webpack-plugin -> 建议升级到最新版本

7. file-loader -> 建议升级到最新版本

8. url-loader -> 建议升级到最新版本

报错信息