木灵鱼儿

木灵鱼儿

阅读:157

最后更新:2021/07/25/ 18:45:47

webpack5 初始化《JJ》多页面的一些问题

问题

  1. 多页面打包后,生成的script.php中包含了所有页面的js文件引入
  2. 多页面打包后,生成的css.php中包含了所有页面的css文件引入

解决方案

个人判断是再new HtmlWebpackPlugin进行处理的时候出现了问题,他无法分辨被打包的页面是谁的。

那么在HtmlWebpackPlugin中唯一区分的属性,就是chunks

但是在官方文档中,并没有声明他的类型。

然后百度的文章,有两种:

  1. chunks:"xxxx"
  2. 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对象。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 157

相关文章