webpack3升级webpack4

webpack3升级webpack4

一、概述

相比于webpack3，webpack4可以零配置运行，打包速度比之前提高了90%，可以直接到ES6的代码进行无用代码剔除，新增的optimization使用简单。
webpack4 设置了默认值，以便无配置启动项目
1）entry 默认值是 ./src/
2）output.path默认值是 ./dist
3) mode 默认值是 production

二、模式mode

webpack4新增了一个mode配置选择，用来表示配置模式的选择情况

  module.exports = {
      mode: 'production' 
  }

包括生产环境production、开发环境devolopment和自定义none这三个选择可
【开发模式】
浏览器调试工具 注释、开发阶段的详细错误日志和提示
快速和优化的增量构建机制 开启 output.pathinfo
在 bundle 中显示模块信息 开启 NamedModulesPlugin
开启 NoEmitOnErrorsPlugin
【生产模式】
启用所有优化代码的功能
更小的bundle大小
去除只在开发阶段运行的代码
关闭内存缓存 Scope hoisting 和 Tree-shaking
开启 NoEmitOnErrorsPlugin
开启 ModuleConcatenationPlugin
开启 optimization.minimize
【none】
禁用所有的默认设置

三、optimization

webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，下面是一些常用配置项：

【minimize】

利用unglifyjsWebpackPlugin插件来压缩模块，生产环境下该值默认为true

optimization: {
    minimize: false
 }

【minimier】
可以使用其他插件来执行压缩功能

 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    optimization: {
 	minimizer: [
  	    new UglifyJsPlugin({ /* your config */ })
  	] 
    }
};

【splitChunks】
webpack4默认使用splitChunksPlugin插件来实现代码分割功能，来替代webpack3中的commonChunksPlugin插件

【runtimeChunk】
通过设置 runtimeChunk: true 来为每一个入口默认添加一个只包含 runtime 的 chunk
【noEmitOnErrors】
使用可读的模块标识，方便更好的调试。webpack在开发模式下默认开启，生产模式下默认关闭，用来替代 NamedModulesPlugin 插件

 module.exports = {
  //...
 optimization: {
 namedModules: true 
  }
 };

四、升级

基于vue-cli的项目对webpack配置进行升级
1、升级nodejs
使用 webpack4 时，必须保证 Node.js 版本 >= 8.9.4，因为 webpack4 使用了大量的ES6语法，这些语法在 nodejs新版 v8 中得到了原生支持
2、升级webpack主要部件，包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge
webpack4版本中 cli 工具分离成了 webpack 核心库 与 webpack-cli 命令行工具两个模块，需要使用 CLI，安装 webpack-cli 至项目中

      cnpm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge
      cnpm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge

3、升级webpack相关插件，包括copy-webpack-plugin、css-loader、eslint-loader、file-loader、html-webpack-plugin、url-loader、friendly-errors-webpack-plugin、optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin

      cnpm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader  friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin 
      cnpm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader  friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin

4、升级vue-loader
vue-loader升级到v15之后，配置和之前相比区别还是比较大的，详细的可参考vue-loader文档，这里我列出此次升级主要涉及的几点改动：
1）升级为v15版本后，需要配合一个plugin才能正常使用

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

2）对于.vue文件中的css模块less的处理，在v14的版本中，需要在vue-loader的配置项中去定义使用的loader,而在v15中，会把style当成一个文件处理，只需在主webpack配置项中去定义需要的loader，省下了不少配置。下面是vue-loader在webpack.base.conf.js文件中的配置。
5、替换webpack相关插件，extract-text-webpack-plugin替换为mini-css-extract-plugin

cnpm uninstall -D extract-text-webpack-plugin
cnpm install -D mini-css-extract-plugin

五、配置

1、webpack.base.conf.js文件，增加node: process.env.NODE_ENV

 module.exports = {
     mode: process.env.NODE_ENV,
 }

2、webpack.prop.conf.js文件
1）将ExtractTextPlugin替换为MiniCssExtraPlugin
2）删除UglifyJsPlugin配置项
3）删除CommonsChunkPlugin配置项
4）添加optimization配置项