webpack 是前端开发中常用的模块打包工具，它可以将多个模块打包成一个文件，减少了页面请求次数，提高了页面加载速度。而 webpack4 是 webpack 的最新版本，相比于之前的版本，它有很多改进和优化。本文将介绍 webpack4 的新特性和升级指南。
webpack4 的新特性
模式（Mode）
webpack4 新增了一个模式（mode）选项，用于指定当前构建的环境。模式有三个选项：development、production 和 none。默认值为 production。在 development 模式下，webpack 会开启一些调试工具，如 source map，提供更好的开发体验；在 production 模式下，webpack 会对代码进行压缩和优化，生成最小化的代码。
module.exports = {
mode: 'production'
};默认配置
webpack4 的默认配置更加合理和安全，不再需要手动配置一些常用的选项，如 entry 和 output。如果没有指定 entry，则默认为 ./src/index.js；如果没有指定 output，则默认为 ./dist/main.js。
零配置
webpack4 引入了零配置（zero configuration）的概念，即不需要任何配置文件，就可以运行 webpack。在项目根目录下执行 webpack 命令，webpack 会默认寻找 ./src/index.js 文件，并将其打包到 ./dist/main.js 中。当然，如果需要自定义配置，也可以在命令行中指定配置文件。
支持 ES6 模块
webpack4 默认支持 ES6 模块语法，不再需要 babel-loader 的支持。只需要在代码中使用 ES6 模块语法，webpack 就会自动进行处理。
// index.js
import { add } from './math.js';
console.log(add(1, 2));优化
webpack4 对代码的打包和优化进行了改进，提高了构建速度和代码质量。其中最重要的改进是引入了 SplitChunksPlugin，用于代码分割和提取公共模块。在多页面应用中，可以将公共代码提取出来，减少重复打包，提高页面加载速度。
升级指南
升级 webpack 和相关依赖
首先需要将 webpack 和相关依赖升级到最新版本。可以使用 npm 或 yarn 进行升级，如下所示：
# 使用 npm npm install webpack webpack-cli --save-dev # 使用 yarn yarn add webpack webpack-cli --dev
更新配置文件
webpack4 的默认配置和之前的版本有所不同，需要根据实际情况更新配置文件。以下是一个基本的 webpack.config.js 文件：
// javascriptcn.com 代码示例
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};使用 mode 选项
使用 mode 选项可以提高代码的质量和性能，建议在生产环境下使用 production 模式。在开发环境下，可以使用 development 模式，方便调试和开发。
module.exports = {
mode: 'development'
};使用 SplitChunksPlugin
使用 SplitChunksPlugin 可以提高代码的复用性和可维护性，减少代码的重复打包，提高页面加载速度。以下是一个例子：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};以上配置将会把公共模块提取出来，并打包成单独的文件。
总结
webpack4 是一个非常优秀的模块打包工具，具有很多新特性和优化，可以提高代码的质量和性能。在升级到 webpack4 之前，需要仔细阅读本文提供的升级指南，更新配置文件和相关依赖，以确保项目能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655635d4d2f5e1655d0ba129