使用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构建多页面程序的更多相关文章

  1. webpack 构建多页面应用

    如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题.网上也给出了很多的例子,很多想法.猛一看,觉得有那么点儿意思,但仔细看也就那样. 使用webpack这个构建工具,可以使我们少考虑 ...

  2. webpack构建多页面react项目(webpack+typescript+react)

    目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...

  3. 【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序

    1.webpack-dev-server插件的基本使用 入门程序 const path = require('path'); // 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露 ...

  4. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  5. Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

  6. webpack搭建多页面系统(一):对webpack 构建工具的理解

    为什么使用webpack构建工具? 1.开发效率方面: 在一般的开发过程中,分发好任务后,每个人完成自己单独的页面,如果有的人开发完成之后,接手别人的任务,就有可能造成开发时候的冲突. 如果利用模块化 ...

  7. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  8. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  9. gulp+webpack构建配置

    使用构建工具之前我觉得前端好蠢,css没有变量,不能写循环,为了兼容要写好多前缀,hmtl写多页面中有同一个header,我就粘贴复制,然后修改的时候每个都要改. 我还不会压缩和合并,每次都要按F5刷 ...

随机推荐

  1. java之 javassist简单使用

    0x01.javassist介绍 什么是javassist,这个词一听起来感觉就很懵,对吧~ public void DynGenerateClass() { ClassPool pool = Cla ...

  2. ARM汇编指令-STMFD/LDMFD

    根据调用规则ATPCS,程序一般都使用FD(FullDescending)类型的数据栈(满栈),那么对立的就由空栈类型的数据栈.空栈是指SP操作完后指向的地址空间是未使用的,反之满栈就是SP指向的地址 ...

  3. 正则表达式 js 怎么获取匹配的变量

    正则表达式 js 怎么获取匹配的变量 $0 ~ $9 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  4. HTML5 & custom element & template

    HTML5 & custom element & template template https://codepen.io/xgqfrms/pen/eYYExvp https://cs ...

  5. nasm astrlen函数 x86

    xxx.asm %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export ast ...

  6. js 创建简单的表单同步验证器

    SyncValidate declare const uni: any; export interface SyncValidateOpt { [key: string]: SyncValidateF ...

  7. 内核栈与thread_info结构详解

    本文转载自内核栈与thread_info结构详解 什么是进程的内核栈? 在内核态(比如应用进程执行系统调用)时,进程运行需要自己的堆栈信息(不是原用户空间中的栈),而是使用内核空间中的栈,这个栈就是进 ...

  8. apply方法的实现原理

    apply 的核心原理: 将函数设为对象的属性 执行和删除这个函数 指定 this 到函数并传入给定参数执行函数 如果不传参数,默认指向 window Function.prototype.myApp ...

  9. ELK的一点认识

    为什么需要ELK: 一般大型系统是一个分布式部署的架构,不同的服务模块部署在不同的服务器上,问题出现时,大部分情况需要根据问题暴露的关键信息,定位到具体的服务器和服务模块,构建一套集中式日志系统,可以 ...

  10. vue中v-model的学习

    v-model在表单元素input.radio.checkBox.textarea创建双向数据绑定,他会根据类型选取正确的方法来更新元素,本质不过是语法糖,负责监听用户的输入操作以更新数据并对一些极端 ...