webpack 是前端开发中常用的模块打包工具，它可以将多个模块打包成一个文件，减少了页面请求次数，提高了页面加载速度。而 webpack4 是 webpack 的最新版本，相比于之前的版本，它有很多改进和优化。本文将介绍 webpack4 的新特性和升级指南。
webpack4 的新特性
模式（Mode）
webpack4 新增了一个模式（mode）选项，用于指定当前构建的环境。模式有三个选项：development、production 和 none。默认值为 production。在 development 模式下，webpack 会开启一些调试工具，如 source map，提供更好的开发体验；在 production 模式下，webpack 会对代码进行压缩和优化，生成最小化的代码。
-------------- - - ----- ------------ --
默认配置
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 就会自动进行处理。
-- -------- ------ - --- - ---- ------------ ------------------ ----
优化
webpack4 对代码的打包和优化进行了改进，提高了构建速度和代码质量。其中最重要的改进是引入了 SplitChunksPlugin，用于代码分割和提取公共模块。在多页面应用中，可以将公共代码提取出来，减少重复打包，提高页面加载速度。
升级指南
升级 webpack 和相关依赖
首先需要将 webpack 和相关依赖升级到最新版本。可以使用 npm 或 yarn 进行升级，如下所示：
- -- --- --- ------- ------- ----------- ---------- - -- ---- ---- --- ------- ----------- -----
更新配置文件
webpack4 的默认配置和之前的版本有所不同，需要根据实际情况更新配置文件。以下是一个基本的 webpack.config.js 文件：
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ----------
----- ----------------------- -------
-
--使用 mode 选项
使用 mode 选项可以提高代码的质量和性能，建议在生产环境下使用 production 模式。在开发环境下，可以使用 development 模式，方便调试和开发。
-------------- - - ----- ------------- --
使用 SplitChunksPlugin
使用 SplitChunksPlugin 可以提高代码的复用性和可维护性，减少代码的重复打包，提高页面加载速度。以下是一个例子：
-------------- - -
------------- -
------------ -
------- -----
-
-
--以上配置将会把公共模块提取出来，并打包成单独的文件。
总结
webpack4 是一个非常优秀的模块打包工具，具有很多新特性和优化，可以提高代码的质量和性能。在升级到 webpack4 之前，需要仔细阅读本文提供的升级指南，更新配置文件和相关依赖，以确保项目能够正常运行。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655635d4d2f5e1655d0ba129