木灵鱼儿
阅读:1587
webpack5 初始化《JJ》多页面的一些问题
问题
- 多页面打包后,生成的script.php中包含了所有页面的js文件引入
- 多页面打包后,生成的css.php中包含了所有页面的css文件引入
解决方案
个人判断是再new HtmlWebpackPlugin进行处理的时候出现了问题,他无法分辨被打包的页面是谁的。
那么在HtmlWebpackPlugin中唯一区分的属性,就是chunks
。
但是在官方文档中,并没有声明他的类型。
然后百度的文章,有两种:
chunks:"xxxx"
chunks:["xxxx","xxxx"]
根据以往的经验,第一种应该是用于唯一值得情况,如果有多个则使用数组,理解应该是没有问题。
所以,我之前的custom-template.js
文件里,采用了第一种,但是恰恰问题也就在这里,你使用第一种方式,HtmlWebpackPlugin并不能区分,也不知道是bug是啥其他问题。
当我采用第二种写法的时候,文件的引入正常了,但是提示了一个文件名冲突的问题。
ERROR in Conflict: Multiple assets emit different content to the same filename index/script.php
ERROR in Conflict: Multiple assets emit different content to the same filename test/script.php
但是实际的script文件其实在每个子目录下,按道理并不会产生冲突,但是他就是报错。
所以,我们只能采用其他形式的存储方式。
我的做法是:
在dist目录下有两个子目录,一个css,一个script,用于存放所有页面的css.php和script.php文件。
每个css.php和script.php实际生成的名字应该是他的chunks对应的名字,chunks应该是入口的名称,并且唯一。
比如:
入口:index
生成:dist/css/index.css
入口:test
生成:dist/css/test.css
而且需要注意,你不能使用[name]
这个关键词,他会带来一些问题,虽然你生成的文件名不一样,但也会提示文件名冲突的错误。
实际代码
custom-template.js
/*
* @Author: mulingyuer
* @Date: 2021-07-04 01:29:59
* @LastEditTime: 2021-07-25 18:39:32
* @LastEditors: mulingyuer
* @Description: 自定义模板
* @FilePath: \JJ\webpack\custom-template.js
* 怎么可能会有bug!!!
*/
const path = require('path');
const resolve = function (myPath) {
return path.resolve(__dirname, myPath);
};
//入口文件
const autoEntry = require('./auto-entry');
//模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// css模板
const cssEjs = resolve('../src/template/css.ejs');
const cssTemplate = (filename) => ({
filename: `css/${filename}.php`, //输出的文件名
template: cssEjs, //自定义模板
chunks: [filename], //指定入口块
inject: false, //自定义模板不需要自动注入
minify: {
removeComments: true, //去除html注释
collapseWhitespace: true, //去除换行
minifyCSS: true //缩小样式元素和样式属性中css
},
});
//js模板
const jsEjs = resolve('../src/template/script.ejs');
const jsTemplate = (filename) => ({
filename: `script/${filename}.php`, //输出的文件名
template: jsEjs, //自定义模板
chunks: [filename], //指定入口块
inject: false, //自定义模板不需要自动注入
minify: {
removeComments: true, //去除html注释
collapseWhitespace: true, //去除换行
minifyCSS: true //缩小样式元素和样式属性中css
},
});
// const chunksArr = ["index", "about"];
const chunksArr = autoEntry.chunks();
module.exports = function () {
//css
let cssPhp = [];
chunksArr.forEach(chunk => cssPhp.push(cssTemplate(chunk)));
//js
let jsPhp = [];
chunksArr.forEach(chunk => jsPhp.push(jsTemplate(chunk)));
//导出
return [...cssPhp, ...jsPhp].map(item => new HtmlWebpackPlugin(item));
}
补充
不能使用一个HtmlWebpackPlugin对象传入多个参数配置了,这样也会产生问题,我们应该保证一个文件对应一个HtmlWebpackPlugin对象。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
webpack5 externals打包时取消打包指定的库
简单说明externals这个属性,常用来做cdn的功能,在打包的时候不打包指定的库,比如vue,jquery,然后在html文件部分,手动引入库的cdn链接,但是,你在开发的时候,你还是需要npm或者yarn安装这个库,import引入使用,只是打包的时候会自动剔除。简单示例webpack.config.jsmodule.exports = { externals: { uikit: "UIkit", } }可以看到,externals是一个对象,对象里面有key和value,其中key的值就是package.json里面,安装的包的名字。而valu...

webpack5 初始化《JJ》主题 下部
图片处理yarn add url-loader file-loader --dev很多人教程都莫名其妙,一张嘴就说推荐使用url-loader解析器,但是闭嘴不提url-loader是基于file-loader的,所以用url就必须两个都装,否则一旦你设置了url的limit限制文件大小,文件超出设置得大小后,就会报file-loader不存在的错误。webpack.config.jsmodule.exports = (env, argv) => ({ //模块-解析器loader module: { rules: [ //图片文件 { ...
webpack5 初始化《JJ》主题 上部
初始化安装yarn init yarn add webpack webpack-cli --devwebpack建议全局安装,省事yarn global add webpack webpack-cli如果不适用全局安装,直接在终端运行本项目的webpack需要使用npx命令npx webpack -v还有一个种办法就是在package.json创建快捷npm脚本,这样就不用加npx前缀了{ "scripts": { "build": "webpack" }, }使用scssyarn add style-loade...
vue 多模块集成,每个模块为一个项目,共用依赖且独立开发,自动引入模块,导航也独立于模块,自动引入
最近遇到一个需求设计一个开发的环境,由于产品本身很庞大,所以需要划分区域开发,每个人负责一个部分,但是又不太想使用官方的那种资源分布的模式,想独立开发,最后整合,且不相互干扰。于是有了这个。[hide]具体要求需要将每个分类单出拆分为一个独立的项目模块,里面有路由、vuex、组件、单页、静态资源等目录。例如:商城:购物车、订单页、商品页、设置页...文章:新建文章、文章列表、修改页、标签页...由于这种分类非常多,所以需要将类似商城、文章这些作为一个模块,每个小组负责一个模块开发,开发vue文件,组件、vuex、路由、静态文件、导航菜单都单独拆分,自己这个项目写一个入口文件,用于资源的调...