面试题:webpack3和webpack4的区别有哪些?

2018年8月25号webpack4正式发布。再次之后只要使用npm install webpack命令，默认安装的就是版本4。在不知道情况下，像我一样的小白就会跳入各种坑中。接下来我说说版本4与以前版本的区别之处。

如何查看当前的webpack版本：

//控制台输出
webpack -v

一、mode的变化

了解 mode 工作机制。

webpack4中增加了mode 的选项：

module.exports = {  mode: 'production'//development，none  };

也可以在CLI参数中传递

webpack --mode=production

支持以下字符串值：

development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

production会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

记住，只设置 NODE_ENV，则不会自动设置 mode。

webpack.config.js中去掉了一些插件，选择production模式会默认使用：

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

当你选择development时：

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

被弃用的插件（4中已删除的）：

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

二、webpack4 去掉了 CommonsChunkPlugin

解释：CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。

CommonsChunkPlugin删除后，改成使用optimization.splitChunks进行模块划分，详细文档看这里。

官方的说法是默认设置已经对大部分用户来说非常棒了，但是需要注意一个问题，默认配置只会对异步请求的模块进行提取拆分，如果要对entry进行拆分，需要设置optimization.splitChunks.chunks = 'all'。

三、UglifyJsPlugin弃用

用途：uglifyJsPlugin 用来对js文件进行压缩，从而减小js文件的大小，加速页面load速度。

if(isProduction){      
  module.exports.plugins.push(        
    new webpack,optimize.UglifyJsPlugin({sourceMap:true})   
  ) 
}

webpack4中，也不需要使用这个plugin了，只需要使用optimization.minimize为true就行，production mode下面自动为true，optimization.minimizer可以配置你自己的压缩程序

用法：

module.exports = {
  // ...
  optimization: {
        minimize:false
  }
}

四、import() and CommonJS 的变化

non-esm.js

module.exports = {
  sayHello: () => {
    console.log('hello world');
  }
};

example.js

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

关注我，了解更多前端面试题~