webpack 是一个流行的前端打包工具，它可以将多个模块打包成一个或多个 bundle。webpack 4.x 是 webpack 的最新版本，它引入了许多新功能和改进，本文将介绍这些新功能及其使用技巧。
新功能介绍
支持零配置
webpack 4.x 引入了一个新的模式，称为 “零配置模式”，它不需要任何配置文件即可运行。可以使用 npx webpack 命令启动 webpack，webpack 会自动查找项目中的入口文件并生成默认的配置。如果需要自定义配置，可以在命令行中传递参数或者创建一个配置文件。
支持 mode 选项
webpack 4.x 引入了一个新的选项 mode，它可以指定 webpack 的构建模式。mode 有三个可选值：development、production 和 none。默认值是 production。不同的模式会启用不同的优化策略，例如 production 模式会启用代码压缩和 tree shaking。
支持 optimization 选项
webpack 4.x 引入了一个新的选项 optimization，它可以控制 webpack 的优化策略。optimization 中有多个子选项，例如 minimizer、splitChunks 和 runtimeChunk。通过配置这些选项，可以进一步优化 webpack 的构建效率和输出质量。
支持 module 类型
webpack 4.x 引入了一个新的模块类型 module，它可以让开发者更方便地使用现代 JavaScript 特性，例如 ES6 模块和动态导入。module 类型的模块可以通过 import() 函数动态加载，而不需要使用 require.ensure 或者其他复杂的方式。
支持 sideEffects 属性
webpack 4.x 引入了一个新的属性 sideEffects，它可以标记模块是否有副作用。副作用是指模块的执行会对环境产生影响，例如修改全局变量或者发送网络请求。通过标记模块的副作用，webpack 可以更好地进行 tree shaking，减少输出的代码体积。
使用技巧
使用 mode 选项
在项目的根目录下创建一个 webpack.config.js 文件，并添加以下内容：
module.exports = {
mode: 'development'
};然后在命令行中执行 npx webpack 命令即可使用 development 模式进行构建。如果需要使用 production 模式，可以将 mode 的值改为 production。
使用 optimization 选项
在 webpack.config.js 文件中添加以下内容：
module.exports = {
optimization: {
minimize: true
}
};这会启用代码压缩功能，将输出的代码体积减小。还可以配置其他选项，例如 splitChunks 和 runtimeChunk，以进一步优化输出的质量。
使用 module 类型
在项目中使用 ES6 模块和动态导入时，可以将模块的类型设置为 module，以便 webpack 正确地处理这些模块。在 webpack.config.js 文件中添加以下内容：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
----- --------
-
-
-
--这会将所有以 .js 结尾的文件的类型设置为 module。
使用 sideEffects 属性
在模块中使用 sideEffects 属性，以标记模块是否有副作用。例如：
-- -------------------- ---- ------- -- -------- ------ - --- - ---- ---------- ------ ----- ------ - ------ --- -- -------- ------ -------- ------ -- - ------ - - -- - ------ --- -- ------------ ---- -------
在 webpack.config.js 文件中添加以下内容：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
----- --------
-
-
--
------------- -
------------ ----
-
--这会启用 sideEffects 功能，将有副作用的模块标记为不可 tree shaking。
结论
webpack 4.x 引入了许多新功能和改进，使得前端开发更加便捷和高效。在实际项目中，可以根据需求灵活使用这些功能，并结合其他工具和技术，以提高项目的开发效率和运行质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676109dd03c3aa6a56087216