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对象。