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

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

文章目录

    • Webpack:v1 与 v2 的区别
        • 1. 新增对`ES6`语法的支持**
        • 2. 支持`tree-shaking` ( 减少打包后的体积 )**
        • 3. 更新`resolve`的写法,去掉`extensions`空字符串**
        • 4. 修改`module`配置
        • 5. 移除部分`plugins`
    • Webpack:v2 与 v3 的区别
        • 1.`Scope Hoisting` : 作用域
        • 2.`Magic Comments` : 魔法注释
        • 3. `webpack-dev-server` : 内置插件
    • Webpack:v3 与 v4 的区别
        • 1. mode 配置选项
        • 2. Loader 使用规则
        • 3. babel 命名规则
        • 4. CommonsChunkPlugin:代码拆分插件
        • 5. mini-css-extract-plugin: css代码抽离插件
        • 6. UglifyJsPlugin:js代码压缩插件
        • 7. happypack:多进程loader打包

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中,因为闭包降低了浏览器的执行效率
Webpack 各版本 ( v1 - v4 ) 的区别_第1张图片

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

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

我们可以看到,拼接成了一个函数:
Webpack 各版本 ( v1 - v4 ) 的区别_第2张图片

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
    • modedevelopment时,process.env.NODE_ENVdevelopment,反之,process.env.NODE_ENVproduction
    • 默认值:production
    • 也可通过webpack --mode 'development | production'来设置当前环境

mode:development时,会启用NamedChunksPluginNamedModulesPlugin

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

modeproduction时,会启用
FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPluginUglifyJsPlugin等插件

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

2. Loader 使用规则

  • webpack 3.X支持loadersrules写法,但是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,把cssjs文件中抽离,防止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.minimizetrue就行,production mode下面自动为trueoptimization.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加载资源

你可能感兴趣的:(Javascript,Webpack,webpack,javascript)