如何通过Webpack高效构建多页面应用程序？

本文共计1162个文字，预计阅读时间需要5分钟。

使用webpack搭建单页面程序十分常见，但在实际开发中，我们可能会遇到需要开发多页面程序的需求。以下是如何使用webpack搭建多页面程序的原理及具体步骤：

原理：

1.使用webpack的入口（entry）配置，定义多个入口文件，每个入口对应一个页面。

2.通过loader和plugin对每个页面的资源进行处理，如JavaScript、CSS、图片等。

3.使用webpack的output配置，输出打包后的文件，包括HTML文件、CSS文件和JavaScript文件。

步骤：

1.创建多个入口文件，例如`index.js`、`about.js`等。

2.在webpack配置文件中，添加多个入口配置：

javascriptmodule.exports={ entry: { index: './src/index.js', about: './src/about.js' }, output: { filename: '[name].bundle.js', path: __dirname + '/dist' }, // 其他配置...};

3.使用loader处理不同类型的资源，如`style-loader`、`css-loader`、`babel-loader`等。

4.使用plugin生成HTML文件，如`-webpack-plugin`。

具体代码如下：

javascriptconst HtmlWebpackPlugin=require('-webpack-plugin');

module.exports={ entry: { index: './src/index.js', about: './src/about.js' }, output: { filename: '[name].bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 其他loader配置... ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.', chunks: ['index'] }), new HtmlWebpackPlugin({ template: './src/about.', chunks: ['about'] }) ]};这样，我们就成功使用webpack搭建了一个多页面程序。

使用webpack搭建单页面程序十分常见，但在实际开发中我们可能还会有开发多页面程序的需求，因此我研究了一下如何使用webpack搭建多页面程序。

原理

将每个页面所在的文件夹都看作是一个单独的单页面程序目录，配置多个entry以及html-webpack-plugin即可实现多页面打包。

下面为本项目目录结构

. ├─ src │ └─ pages │ ├─ about │ │ ├─ index.css │ │ ├─ index.html │ │ └─ index.js │ └─ index │ ├─ index.css │ ├─ index.html │ └─ index.js └─ webpack.config.js

单页面打包基础配置

首先我们来看一下单页面程序的 webpack 基础配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), ], output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js', }, };

要想将其改为多页面程序，就要将它的单入口和单 HTML 模板改为多入口和多 HTML 模板

多页面打包基础配置

改造入口

传统的多入口写法可以写成键值对的形式

module.exports = { entry: { index: './src/pages/index/index.js', about: './src/pages/about/index.js', }, ... }

这样写的话，每增加一个页面就需要手动添加一个入口，比较麻烦，因此我们可以定义一个根据目录生成入口的函数来简化我们的操作

const glob = require('glob'); function getEntry() { const entry = {}; glob.sync('./src/pages/**/index.js').forEach((file) => { const name = file.match(/\/pages\/(.+)\/index.js/)[1]; entry[name] = file; }); return entry; } module.exports = { entry: getEntry(), ... }

改造输出

在输出的配置项中，再将输出的文件名写死显示已经不合适了，因此我们要将名字改为与源文件相匹配的名字

module.exports = { ... output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].[contenthash].js', }, ... }

配置多个 html-webpack-plugin

与入口相同，可以将不同的 html 模板直接写入插件配置中，这里我们需要为每个插件配置不同的chunks，防止 js 注入到错误的 html 中

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: './src/pages/index/index.html', chunks: ['index'], filename: 'index.html', }), new HtmlWebpackPlugin({ template: './src/pages/about/index.html', chunks: ['about'], filename: 'about.html', }), ], ... };

这样的做法与入口有着同样的毛病，因此我们再定义一个函数来生成这个配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); const glob = require('glob'); function getHtmlTemplate() { return glob .sync('./src/pages/**/index.html') .map((file) => { return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file }; }) .map( (template) => new HtmlWebpackPlugin({ template: template.path, chunks: [template.name.toString()], filename: `${template.name}.html`, }) ); } module.exports = { ... plugins: [...getHtmlTemplate()], ... };

这样一个简单的多页面项目就配置完成了，我们还可以在此基础上添加热更新、代码分割等功能，有兴趣的可以自己尝试一下

完整配置

项目地址：xmy6364/webpack-multipage

// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const glob = require('glob'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 多页入口 function getEntry() { const entry = {}; glob.sync('./src/pages/**/index.js').forEach((file) => { const name = file.match(/\/pages\/(.+)\/index.js/)[1]; entry[name] = file; }); return entry; } // 多页模板 function getHtmlTemplate() { return glob .sync('./src/pages/**/index.html') .map((file) => { return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file }; }) .map( (template) => new HtmlWebpackPlugin({ template: template.path, chunks: [template.name.toString()], filename: `${template.name}.html`, }) ); } const config = { mode: 'production', entry: getEntry(), output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].[contenthash].js', }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [new CleanWebpackPlugin(), ...getHtmlTemplate()], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000, hot: true, open: true, }, }; module.exports = config;

到此这篇关于使用Webpack构建多页面程序的实现步骤的文章就介绍到这了,更多相关Webpack构建多页面内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！