使用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 构建多页面应用
如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题.网上也给出了很多的例子,很多想法.猛一看,觉得有那么点儿意思,但仔细看也就那样. 使用webpack这个构建工具,可以使我们少考虑 ...
- webpack构建多页面react项目(webpack+typescript+react)
目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...
- 【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序
1.webpack-dev-server插件的基本使用 入门程序 const path = require('path'); // 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...
- webpack搭建多页面系统(一):对webpack 构建工具的理解
为什么使用webpack构建工具? 1.开发效率方面: 在一般的开发过程中,分发好任务后,每个人完成自己单独的页面,如果有的人开发完成之后,接手别人的任务,就有可能造成开发时候的冲突. 如果利用模块化 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- 深入浅出的webpack构建工具---webpack基本配置(一)
深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...
- gulp+webpack构建配置
使用构建工具之前我觉得前端好蠢,css没有变量,不能写循环,为了兼容要写好多前缀,hmtl写多页面中有同一个header,我就粘贴复制,然后修改的时候每个都要改. 我还不会压缩和合并,每次都要按F5刷 ...
随机推荐
- zoj-3872 Beauty of Array (dp)
]Edward has an array A with N integers. He defines the beauty of an array as the summation of all di ...
- zoj-3870 (二进制)
For an upcoming programming contest, Edward, the headmaster of Marjar University, is forming a two-m ...
- 51nod 1073约瑟夫环 递归公式法
约瑟夫环问题的原来描述为,设有编号为1,2,--,n的n(n>0)个人围成一个圈,从第1个人开始报数,报到m时停止报数,报m的人出圈,再从他的下一个人起重新报数,报到m时停止报数,报m的出圈,- ...
- mimikatz+procdump 提取 Windows 明文密码
0x00 原理 获取到内存文件 lsass.exe 进程 (它用于本地安全和登陆策略) 中存储的明文登录密码. 0x01 操作 Windows10/2012 以下的版本:1.上传 procdump 执 ...
- 关于 TCP 三次握手和四次挥手,满分回答在此
尽人事,听天命.博主东南大学研究生在读,热爱健身和篮球,正在为两年后的秋招准备中,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 C ...
- 最新 uni-app 免费教程
最新 uni-app 免费教程 uni-app 快速入门 steps 建议第一步,看完uni-app官网的首页介绍. 建议第二步,通过快速上手,亲身体验下uni-app. 建议第三步,看完<un ...
- 网站备案查询/ICP备案查询网
网站备案查询/ICP备案查询网 互联网站备案信息全国公安机关互联网站安全服务平台http://www.beian.gov.cn/portal/index 1 http://www.miitbeian. ...
- Redis in Action : Redis 实战学习笔记
1 1 1 Redis in Action : Redis 实战学习笔记 1 http://redis.io/ https://github.com/antirez/redis https://ww ...
- React & Special Props Warning
React & Special Props Warning key & ref demo index.js:1 Warning: Comment: key is not a prop. ...
- CSS font-weight all in one
CSS font-weight all in one font-weight: bolder: 没毛病呀! /* 关键字值 */ font-weight: normal; font-weight: b ...