Webpack + 包含多个文件的多个文件夹

问题描述

我有如下结构的文件夹和文件。只是我想根据文件夹结构生成文件..

Folder-A
    css
        a.css
        b.css
        c.css
    templates
        index.html
    js
        1.js
        2.js
        3.js

Folder-B
    css
        a.css
        b.css
        c.css
    templates
        index.html
    js
        1.js
        2.js
        3.js

问题是

  1. 未基于文件夹生成的 css 文件。
  2. index.html 中包含的所有 css 文件。它不包括基于文件夹结构

预期输出:

  1. Css,html,images,fonts 文件应分别生成 dist/{folder} 文件夹
  2. 生成的 HTML 文件仅包含相应文件夹中的 CSS。

[![样本格式][1]][1]

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: {
    test1: [
      './folder-a/js/index.js','./folder-a/templates/index.html'
    ],test2: [
        './folder-b/js/index.js','./folder-b/templates/index.html'
    ]
  },output: {
    path: path.resolve(__dirname,'dist'),filename: '[name].js',publicPath: "/dist/"
  },module: {
    rules: [
      {
        test: /\.css$/i,use: [
          {
            loader: MiniCssExtractPlugin.loader,},{
            loader: 'css-loader',options: { 
              url: false 
            }
          }
        ]
      },{
        test: /\.pug$/,use: ['pug-loader'],{
        test: /\.js$/,exclude: /(node_modules)/,use: {
          loader: 'babel-loader?presets[]=es2015',options: {
            presets: ['@babel/preset-env'],],plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',chunkFilename: "[name].css"
    }),new HtmlWebpackPlugin({
      filename: 'folder-a/index.html',template: './folder-a/index.html',}),new HtmlWebpackPlugin({
      filename: './folder-b/index.html',template: './folder-b/index.html',new CopyPlugin({
      patterns: [
        { from: './folder-a/images',to: './folder-a/images' },{ from: './folder-b/images',to: './folder-b/images' }
      ],]
};

只是 [1]:https://i.stack.imgur.com/h4OL3.png

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...