前言
Webpack 是一个在现代前端项目中广泛使用的代码打包工具，它可以打包 JavaScript、CSS、图片等多种类型的文件，并将它们转换为优化的静态资源。在 Webpack 中使用模块化编程的方式，可以帮助我们更好地组织代码，提高项目的可维护性和复用性。
在实际项目中，我们往往需要开发多页应用，每个页面都是一个单独的 HTML 文件，依赖不同的 JavaScript 和 CSS 文件。在这种情况下，我们需要使用 Webpack 配置多入口、多输出，同时将静态资源正确地注入到 HTML 中。
本文将详细介绍如何使用 Webpack4 配置多页应用脚手架，包括：
- 模块化编程
- 多入口配置
- 输出文件配置
- HTML 注入及模板配置
- CSS 和图片文件处理
模块化编程
在 Webpack 中，我们使用模块化编程的方式来组织代码。一个模块可以是 JavaScript 文件、CSS 文件、图片、字体等等。当 Webpack 解析文件时，会根据文件类型选择不同的处理方式，并自动解决依赖关系。
一个典型的 JavaScript 模块通常包含一个函数或一个类，而这些函数或类可能会被其他模块所调用。为了能够在其他模块中使用当前模块的函数或类，我们需要使用 export 关键字将它们暴露出去。例如：
// sayHello.js export default function sayHello() { console.log('Hello, world!'); }
// index.js import sayHello from './sayHello'; sayHello();
在上面的例子中，我们通过 import 关键字引入了另一个模块，export default 表示模块中默认导出的内容是一个函数。我们可以通过调用 sayHello 来执行 sayHello.js 模块中的函数。
多入口配置
在多页应用中，我们需要为每个页面配置对应的 JavaScript 入口文件。在 Webpack 中，我们可以通过 entry 属性来配置多个入口文件。
module.exports = { entry: { home: './src/pages/home.js', about: './src/pages/about.js', contact: './src/pages/contact.js', } };
在上面的代码中，我们为 home、about 和 contact 三个页面分别配置了一个 JavaScript 入口文件。
输出文件配置
在多页应用中，每个页面都需要输出对应的 HTML 文件和 JavaScript 文件。Webpack 通过 output 属性来配置这些输出文件。
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ - ----- ---------------------- ------ ----------------------- -------- ------------------------- -- ------- - ----- ----------------------- -------- --------- ------------ ----------- --- - --展开代码
在上面的代码中，我们配置了 path 属性，指定了输出文件的目录。filename 属性使用了占位符 [name]，表示和入口文件名一致的 JavaScript 输出文件。publicPath 属性指定了输出文件的公共路径，可以用于将资源部署到 CDN 上。在后续的 HTML 注入中，我们可以使用 publicPath 属性来正确地加载资源。
HTML 注入及模板配置
在多页应用中，每个 HTML 文件都需要包含对应的 JavaScript 文件和 CSS 文件。Webpack 可以通过 html-webpack-plugin 插件来自动处理这些注入。
首先，我们需要安装 html-webpack-plugin：
npm install html-webpack-plugin --save-dev
然后在 Webpack 配置文件中添加 plugins 属性来启用插件。
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- ----- ---- - ---------------- -------------- - - ------ - ----- ---------------------- ------ ----------------------- -------- ------------------------- -- ------- - ----- ----------------------- -------- --------- ------------ ----------- --- -- -------- - --- ------------------- --------- ------------------------ --------- ------------ ------- --------- --- --- ------------------- --------- ------------------------- --------- ------------- ------- ---------- --- --- ------------------- --------- --------------------------- --------- --------------- ------- ------------ --- - --展开代码
在上面的代码中，我们使用 HtmlWebpackPlugin 来生成 HTML 文件，其中 template 属性指定了 HTML 文件的模板，filename 属性指定了输出的 HTML 文件名，chunks 属性指定了需要注入的 JavaScript 文件。
除此之外，我们还可以使用 html-loader 将 HTML 文件作为一个模块来加载，并可以使用模板引擎实现动态数据绑定。
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- ----- ---- - ---------------- -------------- - - ------ - ----- ---------------------- ------ ----------------------- -------- ------------------------- -- ------- - ----- ----------------------- -------- --------- ------------ ----------- --- -- ------- - ------ - - ----- ---------- ---- - - ------- -------------- -------- - --------- ----- ------------ ----- ------ ----------- ------------- -- -- - ------- ----------------------- -------- - ------- ----------- -------------- - -------- ----- -- -- -- -- -- -- -- -------- - --- ------------------- --------- ------------------------ --------- ------------ ------- --------- --- --- ------------------- --------- ------------------------- --------- ------------- ------- ---------- --- --- ------------------- --------- --------------------------- --------- --------------- ------- ------------ --- - --展开代码
在上面的代码中，我们使用 html-loader 将 HTML 文件作为一个模块来加载，并设置了相应的配置项。在 template-html-loader 中，我们使用了 nunjucks 模板引擎来实现动态数据绑定。
CSS 和图片文件处理
在多页应用中，每个页面可能需要使用不同的 CSS 文件和图片资源。下面是 Webpack 配置文件中的一些相关配置。
-- -------------------- ---- ------- ----- -------------------- - ----------------------------------- ----- ----------------------- - ---------------------------------------------- ----- ----------------- - ------------------------------- ----- ---- - ---------------- -------------- - - ------ - ----- ---------------------- ------ ----------------------- -------- ------------------------- -- ------- - ----- ----------------------- -------- --------- ------------ ----------- --- -- ------- - ------ - - ----- --------- ---- - - ------- ---------------------------- -- - ------- ------------- -------- - -------------- -- -- -- - ------- ----------------- -------- - ------ ---------- -------- - -------------------------- -- -- -- -- -- - ----- ----------------------- ---- - - ------- ------------- -------- - ------ ----- ----- ------------------------ ----------- ------- -- -- -- -- -- -- -------- - --- ---------------------- --------- ---------------------- --- --- -------------------------- --- ------------------- --------- - - ----- ----------------------- -------------- --- ----------------------- --------------- -- -- --- --- ------------------- --------- ------------------------ --------- ------------ ------- --------- --- --- ------------------- --------- ------------------------- --------- ------------- ------- ---------- --- --- ------------------- --------- --------------------------- --------- --------------- ------- ------------ --- - --展开代码
在上面的代码中，我们使用了 MiniCssExtractPlugin 插件来将 CSS 单独打包，同时使用 OptimizeCssAssetsPlugin 来压缩 CSS 文件。在处理图片文件时，我们使用了 url-loader 将小于 8KB 的图片转换为 base64 编码，大于 8KB 的图片则使用 file-loader 进行处理。我们还可以使用 CopyWebpackPlugin 将静态文件复制到输出目录中。
结语
通过本文的介绍，我们学习了如何使用 Webpack4 配置多页应用脚手架，并掌握了多个重要的配置项，包括模块化编程、多入口配置、输出文件配置、HTML 注入及模板配置、CSS 和图片文件处理等方面的内容。我们希望这篇文章能够对您有所帮助，并能够为您的项目带来更好的组织和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6793574b504e4ea9bd791bcc
