webpack 4.0.0-beta.0版本新特性介绍

什么是webpack？

webpack是一个现代JavaScript应用程序的静态模块打包器，一般用于打包前端项目中的代码、样式、图片等资源。

webpack 4.0.0-beta.0版本带来了哪些新特性？

默认支持ES6模块

在之前的版本中，webpack需要通过babel等工具去转换ES6模块为CommonJS等模块。而在webpack 4.0.0-beta.0版本中，webpack默认就支持了ES6模块。这可以减少项目的配置并提高构建速度。

mode选项

mode选项告诉webpack使用哪种模式的内置优化。这个选项有两个可选值：'development'和'production'。默认为'production'。在'development'模式下，webpack会开启更快的增量编译，输出文本文件而不是经过最小化处理的JavaScript文件。在'production'模式下，webpack会进行更多的优化，包括代码压缩、代码分离、去重等。

optimization.splitChunks

这个新配置选项允许将多个chunk中的公共代码提取出来，并生成一个新的chunk。这可以减少bundle的体积，并提高页面的加载速度。

WebAssembly支持

webpack 4.0.0-beta.0可以直接对WebAssembly模块进行打包，提高应用程序的加载速度并减少文件大小。

示例说明

示例一：代码分离

将公共的代码分离成一个单独的文件，可以缩小主入口文件的体积。

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

示例二：使用mode选项

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

以上是webpack 4.0.0-beta.0版本的新特性介绍和示例说明。这些新特性可以让我们更加方便地管理和优化前端项目。