Webpack实现多页面打包的方法步骤
作者:aiguangyuan 时间:2024-11-19 17:35:55
1. 多页面应用(MPA)概念
单页面在开发时会把所有的业务放在一个大的入口里面去,不同的子业务还是同一个URL地址,只不过后面的hash会有所不同。
多页面相对于单页面的区别在于,项目发布上线以后,有多个入口文件,每一次页面跳转的时候,后台服务器都会返回一个新的html文档,这种类型的网站也就是多页面网站,也叫多页应用。
多页面有什么优势呢?主要有以下两点:
1. 多个页面之间是解耦的,利于维护;
2. 多页面对SEO更加友好;
2. 多页面打包基本思路
多页面打包的基本思路在于,每个页面对应一个entry,每个页面对应一个html-webpack-plugin,但这种方式每次在新增或删除页面时需要修改webpack配置,相当麻烦。
3. 多页面打包通用方案
1. 多个页面的文件名统一取名index,通过不同的文件夹来区分;
2. 动态获取 entry 和设置 html-webpack-plugin 数量;
4. 多页面打包实现
4.1. 安装插件;
npm i glob -D
4.2. 配置Webpack文件;
'use strict';
// 引入插件
const glob = require('glob');
const path = require('path');
const webpack = require('webpack');
// 页面打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 自动清理插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 优化控制台输出
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
// 动态计算多页面打包
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
// 获取本地按规则修改好的文件
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
Object.keys(entryFiles).map((index) => {
const entryFile = entryFiles[index];
// 'my-project/src/index/index.js'
const match = entryFile.match(/src\/(.*)\/index\.js/);
// 获取页面文件名
const pageName = match && match[1];
entry[pageName] = entryFile;
// 根据本地定义的页面文件数量来定义htmlWebpackPlugin
htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
template: path.join(__dirname, `src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
);
});
return {
entry,
htmlWebpackPlugins
}
}
const { entry, htmlWebpackPlugins } = setMPA();
module.exports = {
// 入口文件
entry: entry,
// 输出文件
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
// 开发模式
mode: 'development',
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader'
}
]
},
plugins: [
// 热更新插件
new webpack.HotModuleReplacementPlugin(),
// 自动清理插件
new CleanWebpackPlugin(),
// 简化打包控制台输出
new FriendlyErrorsWebpackPlugin()
].concat(htmlWebpackPlugins),
// 热更新相关配置
devServer: {
// 基本目录
contentBase: './dist',
// 热更新
hot: true,
// 只输出报错
stats: 'errors-only'
},
devtool: 'cheap-source-map'
};
来源:https://aiguangyuan.blog.csdn.net/article/details/128605184
标签:Webpack,多页面,打包
0
投稿
猜你喜欢
python自动从arxiv下载paper的示例代码
2021-11-21 04:30:27
element-ui表格数据转换的示例代码
2023-07-02 17:00:23
Python 错误和异常代码详解
2022-02-12 15:14:08
Python多线程通信queue队列用法实例分析
2023-09-22 21:11:44
SQL的小常识, 备忘之用, 慢慢补充.
2011-11-03 17:19:45
Python利用OpenCV和skimage实现图像边缘检测
2023-01-27 01:08:43
sqlserver 多库查询 sp_addlinkedserver使用方法(添加链接服务器)
2024-01-18 20:38:14
对YOLOv3模型调用时候的python接口详解
2023-05-31 00:58:57
Python中asyncore异步模块的用法及实现httpclient的实例
2021-02-19 01:05:18
PLSQL14下载与安装使用教程
2024-01-16 10:59:48
python分别打包出32位和64位应用程序
2023-11-03 04:41:10
vue-cli 环境变量 process.env的使用及说明
2024-05-29 22:28:45
request基本使用及各种请求方式参数的示例
2021-03-31 02:32:52
几种修复ACCESS数据库的实用方法
2008-11-20 17:37:00
网站渗透常用Python小脚本查询同ip网站
2021-06-12 21:51:28
python pyheatmap包绘制热力图
2021-02-18 21:35:46
python @property的用法及含义全面解析
2023-04-06 00:42:28
使用Selenium破解新浪微博的四宫格验证码
2021-06-16 11:22:28
python 根据网易云歌曲的ID 直接下载歌曲的实例
2021-01-15 19:48:47
使用用SQL语句从电脑导入图片到数据库的方法
2024-01-13 22:29:00