Webpack 各版本 ( v1 - v4 ) 的区别

前不久，研究了Webpack 4.X的整体配置，本篇文章我们研究 webpack各版本的区别 包括 v1,v2,v3,v4

Webpack：v1 与 v2 的区别

1. 新增对ES6语法的支持**

2. 支持tree-shaking ( 减少打包后的体积 )**

3. 更新resolve的写法，去掉extensions空字符串**

webpack 1.X：

...
resolve: {
    extensions: ['', '.jsx', '.js', '.json'],
    modulesDirectories: ['node_modules', 'src'],
    alias: {
    	src: __dirname + `/src`,
        components: __dirname + `/src/components`,
        store: __dirname + `/src/store`
    }
}
...

webpack 2.X：

...
resolve: {
    extensions: ['.js', '.css'],
    modules: [
        path.resolve(__dirname, 'node_modules'),
        path.join(__dirname, './src')
    ],
    alias: {
        '@': resolver( 'src'),
        'components': resolve( '@/components'),
        'store': resolve( '@/store')
    }
}
...

4. 修改module配置

• 1. 外层loaders改为rules
• 2. 内层loader改为use
• 3. 所有插件必须加上 -loader，不再允许缩写
• 4. 不再支持使用!连接插件，改为数组形式
• 5. json-loader模块移除，webpack会自动处理

webpack 1.X：

...
   loaders: [
   	{
   	    test: /\.js$/,
   	    loaders: 'babel-loader',
   	    exclude: /node_modules/
   	},
   	{
   	    test:   /\.(less|css)$/,
   	    loader: "style-loader!css-loader!less!postcss-loader"
   	},
   	{
   	    test: /\.json$/,
   	    loader: 'json'
   	},
   ]
...

webpack 2.X：

...
   rules: [
   	{
   	    test: /\.js$/,
   	    use: {
   	    	loader: 'babel-loader',
   	    	options: {
       	  		include: path.join(__dirname, 'src'),
   	    		exclude: /node_modules/
   	    	}
   	    }
   	{
   	    test: /\.(less|css)$/,
   	    use: [
   	    	'style-loader',
       	    'css-loader',
       	    'postcss-loader',
       	    'less-loader'
   	    ]
   	}
   ]
...

5. 移除部分plugins

• 移除了OccurenceOrderPlugin插件，改为内置插件
• 移除了NoErrorsPlugin插件，改为内置插件

Webpack：v2 与 v3 的区别

1.Scope Hoisting : 作用域

之前的每一个module都被包含在一个独立的function closures中，因为闭包降低了浏览器的执行效率

开发团队参考了 Closure Compiler 和 RollupJS 等框架后，将 function closures的包裹方式变成了可配置的形式

...
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
...

我们可以看到，拼接成了一个函数：

2.Magic Comments : 魔法注释

参考require.ensure()设置自己的chunk name

import(/* webpackChunkName: vendor*/ 'module')

3. webpack-dev-server : 内置插件

安装：

npm i webpack-dev-server -D

使用：

const webpack = require('webpack')

...
  plugins: [
      new webpack.HotModuleReplacementPlugin() // 热模块替换
  ],
  devServer: {
    host: 'localhost', // host地址
    port: '8080', // 端口
    open: true, //自动拉起浏览器
    hot: true, //热加载
    hotOnly: true, // 热加载不更新
    publicPath: '', // 基础路径
    // proxy: {}, // 跨域
    // bypass: {} // 拦截器
  },
...

Webpack：v3 与 v4 的区别

1. mode 配置选项

• 代替DefinePlugin，可设置为development/production/none
  • 当mode为development时，process.env.NODE_ENV为development，反之，process.env.NODE_ENV为production
  • 默认值：production
  • 也可通过webpack --mode 'development | production'来设置当前环境

当mode：development时，会启用NamedChunksPlugin和NamedModulesPlugin

// webpack.development.config.js
module.exports = {
  mode: 'development'
  plugins: [
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
  ]
}

当mode为production时，会启用
FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和UglifyJsPlugin等插件

// webpack.production.config.js
module.exports = {
   mode: 'production',
   plugins: [
     new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
   ]
}

2. Loader 使用规则

• webpack 3.X支持loaders与rules写法，但是webpack 4.X废弃loaders写法，只支持rules
• vue-loader 15必须使用VueLoaderPlugin插件

const { VueLoaderPlugin } = require('vue-loader') 

module.exports = {
  plugins: [ new VueLoaderPlugin() ]
}

3. babel 命名规则

使用新的命名规则@babel

• babel-loader
• @babel/core
• @babel/plugin-transform-runtime
• @babel/preset-env
• @babel/runtime
• @babel/polyfill
• …

4. CommonsChunkPlugin：代码拆分插件

• webpack 3.X的代码拆分插件webpack.optimize.CommonsChunkPlugin已经从webpack 4.X中移除，可使用optimization.splitChunks进行代码拆分（提取公共代码）
• 同级的配置optimization.runtimeChunk，可拆分runtime文件

module.exports = {
 ...
  optimization: {
    splitChunks: {
      vendors: {
        name:  'venders',
        chunks:  'all',
        minChunks: 2
    },
    runtimeChunk: {
      name: 'manifest'
    },
  }
 ...
}

5. mini-css-extract-plugin: css代码抽离插件

删除extract-text-webpack-plugin，新增mini-css-extract-plugin，把css从js文件中抽离，防止js太大，加载时间太长

production环境下，必须配合plugins使用

...
module: {
    {
      test: /\.(css)$/,
      use: [
        MiniCssExtractPlugin.loader, // development ：'style-loader'
        'css-loader',
        'postcss-loader'
      ]
    },
}
plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
]
...

6. UglifyJsPlugin：js代码压缩插件

现在只需要使用optimization.minimize为true就行，production mode下面自动为true，optimization.minimizer可以进行个性化配置

...
optimization: {
	minimizer: {
		// js代码压缩插件
      	new UglifyJsPlugin({
          cache: true, 
          parallel: true, // 多线程，加速构建
          sourceMap: true // sourceMap调试
        }),
        // css代码压缩插件
        new OptimizeCSSAssetsPlugin()
	}
}
...

7. happypack：多进程loader打包

happypack可进行多进程loader打包，当开启时，子进程执行，结果发给父进程

这里就不做过多介绍，官方文档：happypack

---

附文章：

Webpack 4.X 从零配置SPA单页应用

Webpack 4.X 配置cdn加载资源