前言
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，并生成一个或多个 bundle。
Webpack4 是 Webpack 的最新版本，相比于之前的版本，有着更好的性能和更加灵活的配置。在本文中，我们将详细介绍 Webpack4 的配置。
安装
首先需要安装 Node.js 和 npm。然后可以使用以下命令进行安装：
npm install webpack webpack-cli --save-dev
配置文件
Webpack4 的配置文件是一个 JavaScript 文件，通常命名为 webpack.config.js。在该文件中，我们可以定义入口文件、输出路径、加载器、插件等。
以下是一个简单的配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--在这个配置中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。
加载器
Webpack4 支持使用加载器来处理不同类型的文件。加载器可以将文件转换为模块，以便在应用程序中使用。
以下是一个使用 Babel 加载器的示例：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--在这个配置中，我们指定了对所有 .js 文件使用 Babel 加载器，并排除了 node_modules 目录。
插件
Webpack4 还支持使用插件来优化应用程序。插件可以执行各种任务，例如压缩代码、提取公共模块等。
以下是一个使用 UglifyJS 插件的示例：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJSPlugin()
]
};在这个配置中，我们使用 UglifyJS 插件来压缩代码。
模式
Webpack4 引入了模式的概念，可以指定开发或生产模式。在开发模式下，Webpack4 会生成可读性更好的代码，而在生产模式下，Webpack4 会生成优化后的代码。
以下是一个配置开发模式的示例：
module.exports = {
mode: 'development'
};总结
在本文中，我们介绍了 Webpack4 的配置文件、加载器、插件和模式。通过合理的配置，可以优化应用程序的性能，提高开发效率。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d849d01886fbafa45f474b