详解使用webpack构建多页面应用

这篇文章将详细解读如何使用webpack构建多页面应用，长沙网络推广对此有着独到的见解，今天我们将一同跟随长沙网络推广，深入这个话题。

关于webpack的配置和使用，网络上已经存在许多文章，但大部分主要聚焦在单页应用上。当我们需要同时打包多个html页面时，如何设置webpack就显得尤为重要。如何在webpack-dev-server里使用路由？如何打包多个html和js chunk并自动更新md5？本文正是为解决这些问题而写。

我们假设你已经对Webpack有了最基本的了解。我们的需求是使用webpack-dev-server作为开发服务器，当访问不同的路由时，如/a时显示a.html，/b时显示b.html。我们需要将页面资源打包成多个html，并给这些资源添加md5时间戳，以确保缓存更新。

接下来是主要的目录结构：在src目录下有一个views文件夹，每个子文件夹代表一个页面，包含该页面的js文件和其他相关资源。最终打包输出的目录是output，其中包含了根据template.html生成的各个页面的html文件。我们还有webpack.config.js配置文件和用于整合webpack-dev-server和express的dev-server.js文件。

接下来我们进入Webpack的配置部分。这里主要解决两个问题：一是如何打包多个页面的js文件；二是如何打包多个html文件。

对于第一个问题，我们可以读取src/views下的目录，将每个目录视为一个页面，并打包成一个单独的js chunk。这样，每个页面都会有一个对应的js文件，提高了代码的复用性和可维护性。

对于第二个问题，我们可以通过循环生成多个HtmlWebpackPlugin插件来解决。每个插件的chunks属性可以分别指向上面打包的js chunk，确保每个html页面都能正确引用到其所需的js文件。我们还可以利用HtmlWebpackPlugin的其他功能，如压缩html、替换静态资源等，来优化生成的html文件。

通过合理的配置和使用webpack，我们可以轻松地构建多页面应用，并实现路由、资源打包和缓存更新等功能。希望这篇文章能给你带来启发和帮助。如果你对webpack还有其他疑问或需求，欢迎继续和交流。Webpack配置与路由定制

我们有一份基础的webpack.config.js配置文件，其中包含了一些基础的Webpack配置。在此基础上，我们需要实现多页面应用的路由配置。

假设我们的项目中有多个页面，每个页面都有一个对应的入口文件。为了自动化处理这些入口，我们使用了glob模块来获取指定路径下的所有入口文件。每一个入口文件对应一个页面，我们为每个页面生成一个独立的entry，并配置HtmlWebpackPlugin来生成对应的HTML文件。

现在，让我们来关注路由配置的部分。在多页应用中，我们希望访问的URL是像localhost:8080/a这样的格式，而不是localhost:8080/a.html。为了实现这一需求，我们需要对webpack-dev-server进行一定的定制。

由于webpack-dev-server只是将文件打包在内存里，传统的文件服务器方式如express的sendfile方法无法直接用于发送这些在内存中的文件。Webpack提供了一个outputFileStream的接口，我们可以利用这个接口来输出内存中的文件，并据此进行路由定制。

为了实现自定义路由，我们可以引入express或koa等库，将webpack-dev-server作为中间件来处理请求。当收到一个请求时，我们可以根据请求的URL来找到对应的HTML文件（这个HTML文件是由Webpack生成的），然后返回这个HTML文件的内容。这样，我们就可以实现像localhost:8080/a这样的URL访问了。

总结一下，我们通过结合Webpack和webpack-dev-server，实现了多页应用的自动化构建和路由定制。这使得我们可以更高效地开发和管理前端项目，提升用户体验。在这个过程中，我们使用了glob模块来自动化处理入口文件，利用了Webpack的outputFileStream接口来实现路由定制，引入了express或koa等库来更好地管理请求和响应。

dev-server.js

引入Express和Webpack这两位强大的小伙伴，为前端应用保驾护航。加载我们的webpack配置文件，用于定义应用的构建规则。

```javascript

const express = require('express'); // 引入express，建立web服务器

const webpack = require('webpack'); // webpack大显神通的地方

const webpackConfig = require('./webpack.config'); // 加载webpack配置

// 创建express应用实例

const app = express();

// 创建webpack编译器实例

const compiler = webpack(webpackConfig);

// 使用webpack-dev-middleware中间件，实时编译并更新页面资源

const devMiddleware = require('webpack-dev-middleware')(compiler, {

publicPath: webpackConfig.output.publicPath, // 设置公共路径

stats: { // 配置统计信息展示方式

colors: true, // 彩色输出更友好

chunks: false // 不显示chunks信息，保持简洁

}

});

app.use(devMiddleware); // 将中间件应用到服务器

// 定义路由规则，动态加载不同页面内容

app.get('/:viewname?', (req, res, next) => { // 使用正则表达式匹配任意路径请求

const viewname = req.params.viewname || 'index'; // 获取视图名称参数，若无则默认为index页面

const filepath = path.join(compiler.outputPath, `${viewname}.html`); // 构建完整的文件路径

compiler.outputFileSystem.readFile(filepath, (err, result) => { // 从文件系统中读取文件内容

if (err) { // 如果读取失败，则传递错误到下一个中间件处理

return next(err);

}

res.set('content-type', 'text/html'); // 设置响应内容类型为HTML文本

res.send(result); // 发送文件内容到客户端浏览器响应流中