Webpack 多页面打包配置
前言
随着前端工程化的发展，Webpack 作为一个模块打包工具被广泛应用在前端开发中。在 React、Vue、Angular 等前端框架中，Webpack 都被作为默认的打包工具。但在多页面应用中，Webpack 的使用相对较少，甚至一些前端开发者认为只有单页面应用才需要使用 Webpack。但实际上，使用 Webpack 也可以对多页面应用进行打包优化，从而提高应用的性能和开发效率。
本文将介绍如何使用 Webpack 对多页面应用进行打包配置，以及一些打包优化的技巧和注意事项。
基础配置
入口配置
在多页面应用中，每个页面都有一个独立的入口文件。因此，在 Webpack 的配置中，需要对多个入口文件进行配置。
module.exports = {
entry: {
page1: './src/page1.js',
page2: './src/page2.js',
...
},
}出口配置
在多页面应用中，每个页面都对应着一个 HTML 文件。因此，在 Webpack 的配置中，需要对每个 HTML 文件进行打包配置。
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js',
},
}其中，[name] 会自动替换为入口文件对应的名称，[hash] 会自动生成一个哈希值，用于文件版本控制。
HTML 模板配置
在多页面应用中，每个 HTML 文件都需要对应着一个模板文件。可以使用 Webpack 插件 html-webpack-plugin 来自动生成 HTML 文件。
-- -------------------- ---- -------
-------------- - -
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
--- -------------------
--------- -------------------
--------- -------------
------- ----------
---
---
--
-其中，template 代表模板文件路径，filename 代表生成的 HTML 文件路径，chunks 代表当前 HTML 文件需要引入的入口文件。
打包优化
公共模块抽取
多个页面之间往往会有一些公共的模块，例如 jQuery、lodash 等常用库。为了减少重复打包这些公共模块，可以使用 Webpack 插件 CommonsChunkPlugin 进行公共模块抽取。
module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2,
}),
],
}其中，name 表示生成的公共模块名称，minChunks 表示至少需要被几个入口文件引用才会进行公共模块抽取。
CSS 文件抽取
在多页面应用中，每个 HTML 文件都会对应着一个 CSS 文件。可以使用 Webpack 插件 mini-css-extract-plugin 来抽取 CSS 文件。
-- -------------------- ---- -------
----- -------------------- - ----------------------------------
-------------- - -
-------- -
--- ----------------------
--------- --------------------
---
--
------- -
------ -
-
----- ---------
---- -
----------------------------
-------------
-----------------
--
--
--
--
-其中，MiniCssExtractPlugin.loader 会将 CSS 文件提取到独立的文件中，css-loader 和 postcss-loader 用于处理 CSS 文件的依赖关系和浏览器兼容性。
总结
通过以上的配置，我们可以针对多页面应用进行 Webpack 打包优化，从而提高应用的性能和开发效率。但需要注意的是，在实际的开发中，还需要根据具体的业务场景和要求进行适当的配置和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6582e8e1d2f5e1655ddf7f7d