Webpack 是一种用于打包 JavaScript 应用程序的开源工具，可以通过该工具将应用程序的所有依赖项打包到一个或多个文件中。Webpack4 是 Webpack 的最新版本，并为 Webpack 的使用者提供了一些非常不错的新功能。如果你正在使用 Webpack 进行应用程序开发，那么了解 Webpack4 以及如何使用它将是非常有益的。
安装 Webpack4
安装 Webpack4 非常简单，只需使用 npm 命令即可：
npm install webpack webpack-cli --save-dev
安装完成后，你可以在项目的 package.json 文件中看到 Webpack4 的依赖项列表。
Webpack4 模块说明
Webpack4 模块的核心是由一系列的 loader 和 plugin 组成。了解这些组件，可以让你在使用 Webpack4 时可以更加灵活。
Loader
Loader 是 Webpack4 中用于在打包过程中预处理文件的文件加载器。Webpack4 支持各种类型的文件加载器，包括诸如 babel-loader 和 css-loader 等常用的加载器。
例如，babel-loader 可以将 ES6 语法编译为 ES5 语法，而 css-loader 可以将 CSS 代码嵌入到 JavaScript 中。
Plugin
Plugin 用于扩展 Webpack4 的功能。Webpack4 提供了各种类型的插件，如 HTMLWebpackPlug、ExtractTextWebpackPlugin 和 UglifyJsPlugin。这些插件可以用来增加项目的性能和功能。
HTMLWebpackPlugin 可以自动生成一个 HTML 文件，并将其插入到 Webpack4 打包后的文件中。ExtractTextWebpackPlugin 可以将打包后的 CSS 代码从 JavaScript 文件中提取出来。UglifyJsPlugin 可以将 Webpack4 打包后的 JavaScript 代码进行压缩。
Webpack4 配置
Webpack4 的配置文件是一个 JavaScript 文件，其中包含一组关于 loader 和 plugin 的配置项。下面是一个非常基本的 Webpack4 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- --------------------
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
--
-------- ---- -------------------
--------- ------------------
---
--这个配置文件的作用：
- 设置入口文件为
./src/index.js； - 将打包后的文件命名为
bundle.js，并将其输出到dist文件夹中； - 启用 source map，以便我们可以在浏览器中看到代码的调试信息；
- 使用
style-loader和css-loader预处理*.css文件； - 使用 HtmlWebpackPlugin 生成 HTML 模板文件。
Webpack4 运行
你可以通过命令行工具运行 Webpack4，也可以添加一个运行脚本到 package.json 文件中。例如，我们可以在 package.json 文件中添加以下脚本：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},此脚本通过运行 webpack --mode production 命令来构建我们的 Webpack4 应用程序。此命令将根据我们在 Webpack4 配置文件中设置的选项来构建应用程序。如果一切都设置正确，并且配置文件没有错误，那么 Webpack4 将成功生成打包好的文件。你可以在浏览器中打开生成的 HTML 文件，以查看你的应用程序。
总结
以上是对 Webpack4 的基本介绍，包括其核心组件 Loader 和 Plugin，以及如何编写 Webpack4 的配置文件并使用命令行或脚本运行应用程序。使用 Webpack4 进行应用程序开发可以大大提高应用程序的性能和功能，并帮助你更好地组织你的代码。如果你还没有尝试使用 Webpack4，那么我强烈建议你尝试一下，相信你一定会受益匪浅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e72ed48841e9894af5258