Webpack 是一个现代化的 JavaScript 应用程序打包工具，它可以将多个 JavaScript 文件打包成一个或多个文件，使得应用程序的加载速度更快、资源更少。在现代 JavaScript 开发中，Webpack 已经成为了必不可少的工具。本文将介绍一些现代 JavaScript 开发必须掌握的 Webpack 技巧，包括：
- 使用 webpack-dev-server 进行开发
- 使用多个 entry 和 output
- 使用 babel-loader 编译 ES6+ 代码
- 使用 postcss-loader 自动添加 CSS 前缀
- 使用 HtmlWebpackPlugin 自动生成 HTML 文件
使用 webpack-dev-server 进行开发
webpack-dev-server 是 Webpack 提供的一个开发服务器，它可以在本地启动一个服务器，自动编译代码并刷新浏览器。使用 webpack-dev-server 可以大大提高开发效率。下面是一个简单的配置：
-------------- - -
---------- -
------------ ---------
----- -----
----- -----
--
--上面的配置中，我们设置了 contentBase 为 './dist'，表示服务器将从这个目录提供文件。port 设置了服务器的端口号，open 表示自动打开浏览器。启动开发服务器的命令为：
--- ------------------ -------- -----------------
使用多个 entry 和 output
在实际开发中，我们通常会有多个入口文件，每个入口文件都会生成一个对应的输出文件。Webpack 支持多个 entry 和 output，我们可以使用这个特性来配置多个入口文件和输出文件。下面是一个例子：
-------------- - -
------ -
----- ----------------
------ -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
--上面的配置中，我们设置了两个入口文件 main.js 和 login.js，它们会生成对应的输出文件 main.js 和 login.js。[name] 表示入口文件的名称，Webpack 会自动将其替换为实际的名称。
使用 babel-loader 编译 ES6+ 代码
现代 JavaScript 开发中，ES6+ 已经成为了主流的语言特性。但是在一些旧版本的浏览器中，这些语言特性并不被支持。为了让代码在这些浏览器中能够正常运行，我们需要使用 babel-loader 将 ES6+ 代码编译成 ES5 代码。下面是一个简单的配置：
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
--上面的配置中，我们设置了一个 babel-loader，它会将所有的 .js 文件编译成 ES5 代码。options 中的 presets 表示使用哪些预设，@babel/preset-env 表示使用最新的 ES 特性，同时兼容旧版本的浏览器。
使用 postcss-loader 自动添加 CSS 前缀
在编写 CSS 代码时，我们通常需要添加一些浏览器前缀，以兼容不同的浏览器。手动添加这些前缀非常繁琐，而 postcss-loader 可以自动为我们添加这些前缀。下面是一个简单的配置：
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- ------------- ------------------
--
--
--
--上面的配置中，我们设置了一个 postcss-loader，它会自动为 CSS 代码添加浏览器前缀。我们需要在项目根目录下创建一个 postcss.config.js 文件，并配置一些插件，例如 autoprefixer 插件：
-------------- - - -------- -------------------------- --
使用 HtmlWebpackPlugin 自动生成 HTML 文件
在实际开发中，我们通常需要手动编写 HTML 文件，并将生成的 JS 和 CSS 文件手动引入到 HTML 文件中。这个过程非常繁琐，而 HtmlWebpackPlugin 可以自动为我们生成 HTML 文件，并将生成的 JS 和 CSS 文件自动引入到 HTML 文件中。下面是一个简单的配置：
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ---------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--
--上面的配置中，我们设置了两个 HtmlWebpackPlugin，它们会分别生成 index.html 和 login.html 两个 HTML 文件。chunks 表示要引入的 JS 文件，这里我们只引入了 main.js 和 login.js。template 表示 HTML 模板文件的路径，filename 表示生成的 HTML 文件的路径。
总结
Webpack 是现代 JavaScript 开发中必不可少的工具，它可以帮助我们打包和优化应用程序。本文介绍了一些现代 JavaScript 开发必须掌握的 Webpack 技巧，包括使用 webpack-dev-server 进行开发、使用多个 entry 和 output、使用 babel-loader 编译 ES6+ 代码、使用 postcss-loader 自动添加 CSS 前缀、使用 HtmlWebpackPlugin 自动生成 HTML 文件。这些技巧可以大大提高我们的开发效率，并使我们的应用程序更加高效和稳定。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c98727add4f0e0ff3565fb