本文详解如何使用webpack构建传统多页面应用，解决SPA复杂性及后端渲染需求。通过配置html-webpack-plugin实现多入口打包，集成pug模板引擎统一UI布局，并结合ESLint、TypeScript及jQuery增强开发体验，提供完整配置方案与项目地址。
webpack多页面打包概述
前言
最初接触webpack是因为Vue框架，其脚手架基于webpack构建。起初认为webpack专为单页面应用设计，但仔细思考后，若将这一高效打包方案应用于传统多页面项目，效率或许能显著提升。目前已有许多优秀的前端开发者提供了相关demo和教程，我也编写了一个示例项目，希望能帮助读者更好地学习webpack。
以上为简要介绍，接下来提供项目地址和核心内容，建议配合实际代码阅读以获得更佳体验。
webpack-multi-page
项目解决的问题
项目解决的问题
- SPA开发复杂度较高，若偏好传统多页应用架构，或公司项目需要后端渲染，该如何处理页面模板？
- 各页面共用相同的UI布局导致维护困难，UI微调时需逐个页面修改，既繁琐又易遗漏，如何解决？
- 能否将ESLint整合进构建流程以进行语法检查？
- 能否集成PostCSS以增强浏览器兼容性处理？
- 如何在webpack环境中使用jQuery？
- 如何在webpack环境中使用TypeScript？
多页面目录结构与打包配置
src目录对应dist目录
使用webpack打包多页面时，期望src目录下的结构在打包后对应dist目录的布局如上图所示。开发者依据页面模块思路搭建架构，经webpack打包后生成传统页面结构。
/**
* 创建打包路径
*/
const createFiles = function() {
const usePug = require('../config').usePug;
const useTypeScript = require('../config').useTypeScript;
const path = require('path');
const glob = require('glob');
const result = [];
const type = usePug ? 'pug' : 'html';
const scriptType = useTypeScript ? 'ts' : 'js';
const files = glob.sync(path.join(__dirname, `../src/views/**/*.${type}`));
for (file of files) {
result.push({
name: usePug ? file.match(/\w{0,}(?=\.pug)/)[0] : file.match(/\w{0,}(?=\.html)/)[0],
templatePath: file,
jsPath: file.replace(type, scriptType),
stylePath: file.replace(type, 'stylus')
});
}
return result;
};利用该方法可获取需要打包的文件路径（获取路径的模块也可替换为fs模块），根据得到的文件路径，我们可以使用html-webpack-plugin来实现多页面打包。
由于每个html-webpack-plugin的实例仅针对/生成一个页面，因此构建多页应用需配置多个html-webpack-plugin实例：
const plugins = function() {
const files = createFiles();
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
let htmlPlugins = [];
let Entries = {};
files.map(file => {
htmlPlugins.push(
new HtmlWebpackPlugin({
filename: `${file.name}.html`,
template: file.templatePath,
chunks: [file.name]
})
);
Entries[file.name] = file.jsPath;
});
return {
plugins: [
...htmlPlugins,
new ExtractTextPlugin({
filename: getPath => {
return getPath('css/[name].css');
}
})
],
Entries
};
};因使用了ExtractTextPlugin，这些CSS代码最终将生成至所属chunk目录下，成为独立的CSS文件。
集成Pug模板引擎
模版引擎
各页面共用相同的UI布局导致维护困难，UI微调时需逐个页面修改，既繁琐又易遗漏，如何解决？
针对此问题，项目引入并使用了pug模版引擎。
现在，我们可以利用pug的特性，创建一个共用组件：
demo.pug
p 这是一个共用组件
随后，当需要使用该公用组件时，只需引入即可：
include 'demo.pug'此外，你还可以使用所有pug支持的特性。
在webpack中配置pug十分简单，首先安装：
npm i --save-dev pug pug-html-loader接着将所有.html后缀的文件改为.pug后缀，并采用pug语法编写。
然后在规则中再增加一条配置
{
test: /\.pug$/,
use: 'pug-html-loader'
}同时，将plugins对象中引用index.html的HtmlWebpackPlugin的template属性，也需改为index.pug。
整合ESLint进行代码检查
webpack整合eslint
先展示配置代码：
if (useEslint) {
loaders.push({
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, 'src')],
options: {
formatter: require('stylish')
}
});
}通过webpack整合ESLint，可确保编译生成的代码无语法错误且符合编码规范；但在开发过程中，等到编译时才发现问题可能过于滞后。
因此建议将ESLint整合进编辑器或IDE中，例如本人使用VS Code，可安装名为Eslint的插件，一旦编写有问题代码，系统会立即标识出来。
开发环境与生产环境配置
dev环境与prod环境
阅读webpack项目时，通常需先查看package.json文件。因为当你在命令行输入一句命令
npm run devwebpack便会找到package.json文件中的script属性并依次分析命令，可见该命令对应执行
代码如下：
nodemon --watch build/ --exec \"cross-env NODE_ENV=development webpack-dev-server --color --progress --config build/webpack.dev.js\"同样，当输入命令
npm run buildscript便会执行
ross-env NODE_ENV=production webpack --config build/webpack.prod.js以此区分开发环境或生产环境。
尽管我们会对环境进行区分，但基于不重复原则，项目将两个环境公用的配置整合到(build/webpack.base.js)文件中。随后利用webpack-merge插件将配置合并在一起
集成jQuery与TypeScript
webpack中使用jquery
在webpack中使用jquery也很简单，我们可以在loaders中增加一条配置：
if (useJquery) {
loaders.push({
// 通过require('jquery')来引入
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
// 暴露出去的全局变量的名称 随便你自定义
options: 'jQuery'
},
{
// 同上
loader: 'expose-loader',
options: '$'
}
]
});
}随后当需要在某个js文件使用jq时，引用暴露出来的变量名即可：
import $ from 'jQuery';webpack中使用typescript
在webpack中使用jquery也很简单，我们可以在loaders中增加一条配置：
if (useTs) {
loaders.push({
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
});
}然后将js文件改为ts即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。