前言
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