基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件
一、解决什么问题
1、手写页面多入口,一个一个输入太麻烦,通过代码实现
2、手写多个htmlWebpackPlugin插件太麻烦,通过代码实现
二、多入口代码实现
//读取所有.js文件,动态设置多入口
function getEntry() {
var entry = {};
//读取src目录下page下的所有.js文件
glob.sync('./src/pages/**/*.js')
.forEach(function (name) {
let start = name.indexOf('src/') + 10,
end = name.length - 3;
let n = name.slice(start, end);
let key = n.slice(0, n.lastIndexOf('/')); //保存各个组件的入口
// console.log(key);
entry[key] = name;
});
return entry;
};
修改module.exports的入口entry,注释掉原来手写的代码,改成上面的方法如下:
三、多htmlWebpackPlugin插件代码实现
//插入htmlWebpackPlugin
(function(){
//取得配置的入口key
const entryObj = getEntry();
//存储路径和chunks
const htmlArray = [];
for(let key in entryObj){
htmlArray.push({
html: key,
chunks: ['vendor', 'common', key]
})
}
//自动生成html模板
htmlArray.forEach((element) => {
module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element.html, element.chunks)));
});
})();
module.exports.plugins是配置文件当中的plugins数组,getHtmlConfig方法主要是返回htmlWebpackPlugin的配置,代码如下:
// 设置html-webpack-plugin参数,返回参数对象
let getHtmlConfig = function (name, chunks) {
var _template = `./src/pages/${name}/index.html`;
var _filename = `${name}/index.html`;
//index单独处理
if (name === "index") {
_filename = `index.html`;
}
let config = {
template: _template,
filename: _filename,
// favicon: './favicon.ico',
// title: title,
inject: true, //设置为true插入的元素放入body元素的底部
hash: true, //开启hash ?[hash]
chunks: chunks,
minify: process.env.NODE_ENV === "development" ? false : {
removeComments: true, //移除HTML中的注释
collapseWhitespace: true, //折叠空白区域 也就是压缩代码
removeAttributeQuotes: true, //去除属性引用
}
};
return config;
};
注释掉原来module.exports.plugins配置当中手写的HtmlWebpackPlugin
四、测试
1、在src中的pages目录当中新建index2文件夹,下面新建index.js和index.html
2、运行webpack命令查看效果,如下图:
五、实现思路
1、入口以文件的目录为key,js文件的具体路径为值
2、根据入口文件的key拼接.html文件模板路径,key直接作为chunks的值
3、往module.exports.plugins的数组中插入HtmlWebpackPlugin对象
源码地址:https://github.com/James-14/webpack4_multi_page_demo
写的不对之处请大家批评指正~~~~!!!!!!
文章原创,转载请注明出处,谢谢!
基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件的更多相关文章
- 基于webpack实现多html页面开发框架一 准备工作
本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...
- 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离
本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题 1.CSS打包 2.CSS处理浏览器兼容 3.SASS支持 4.CSS分离成单独的文件 ...
- 基于webpack实现多html页面开发框架六 提取公共代码
一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
一.解决什么问题 1.开发环境js.css不压缩,可在浏览器选中代码调试 2.开发环境运行http服务指向打包后的文件夹 3.babel输出浏览器兼容的js代码 二.需要 ...
- 基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录
一.解决什么问题 1.图片路径替换.并输出到打包目录 2.输出目录清理 二.需要安装的包 file-loader:html.css中图片路径替换,图片输出到打包目录:命令:npm ...
- 基于webpack实现多html页面开发框架七 引入第三方库如jquery
一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...
- 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用
一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...
- 基于webpack和vue.js搭建开发环境
前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. ...
- 基于DDD的现代ASP.NET开发框架--ABP系列之3、ABP分层架构
基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP的官方网站:ht ...
随机推荐
- 在vue中如何使用axios
1.前言 在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -& ...
- PHP过滤换行的方法
PHP过滤换行的方法 <pre> public function trimall($str) { $qian = array(" ", " ", & ...
- 008.Kubernetes二进制部署Nginx实现高可用
一 Nginx代理实现kube-apiserver高可用 1.1 Nginx实现高可用 基于 nginx 代理的 kube-apiserver 高可用方案. 控制节点的 kube-controller ...
- jquery正确获取iframe里元素的方法
<iframe id="_ae_frame" width="100%" height="100%" frameborder=" ...
- maven的项目结构
1.标准目录结构: src -main –bin 脚本库 –java java源代码文件 –resources 资源库,会自动复制到classes目录里 ...
- 网站搭建 - IIS 填坑 - 终于建好站了 linux + Windows
之前的IIS可以运行Windows的网页,但是对于php的网页,还是不能够支持,于是决定重新来一遍. (把踩的坑重新描述一下,在下载完php之后,解压后不要急着改文件,跳到最后的页面去改.) 以便能够 ...
- 用大写字母输入 Linux 命令,实现以 sudo 用户权限运行
我们知道,一些 Linux 命令是要通过 sudo 权限才能运行的,这需要我们每次使用这些命令时在前面加一个 sudo ,十分繁琐.今天给大家介绍一个好用的工具 SUDO ,它只需要我们用大写字母键入 ...
- java编程思想第四版第五章总结
1. 构造器 构造器的一个重要的作用: 保证对象被使用之前初始化了. 构造器是一种特殊类型的方法, 因为他没有返回值.这与返回值为空(void)明显不同.对于空返回值,尽管方法本身不会自动返回什么, ...
- Live CD
Live CD,又译为自生系统,是事先存储于某种可移动存储设备上,可不特定于计算机硬件(non-hardware-specific)而启动的操作系统(通常亦包括一些其他软件),不需安装至计算机的本地外 ...
- JS的原型和继承
__proto__除null和undefined,JS中的所有数据类型都有这个属性: 它表示当我们访问一个对象的某个属性时,如果该对象自身不存在该属性, 就从它的__proto__属性上继续查找,以此 ...