如何使用 webpack 创建子目录？

问题描述

我正在尝试使用 webpack 将多个 HTML 文件捆绑在不同目录中，但无法使其正常工作。

文件夹结构为：

app
 /25off
   **-index.html**
 /assets
    /fonts
    /images
    /scripts
      -App.js
    /styles
 **- index.html**

我想将两个 index.html 文件捆绑在一起。一个将是根目录，然后另一个将位于名为“25off”的子目录中

Webpack 配置为：

const currentTask = process.env.npm_lifecycle_event
const HtmlWebpackPlugin = require('html-webpack-plugin')

let cssConfig = {
    test:/\.css$/i,use: ['css-loader?url=false',{loader: "postcss-loader",options: {postcssOptions: {plugins: postCssplugins}}}

    ]
}

let config = {
    entry: './app/assets/scripts/App.js',plugins: [
        new HtmlWebpackPlugin({filename: 'index.html',template: './app/index.html'}),new HtmlWebpackPlugin({filename: 'index.html',template: './app/25off/index.html'})
        
    ],module: {
        rules: [
            cssConfig
        ]
    }
}

if(currentTask == 'dev'){
    cssConfig.use.unshift('style-loader')
    config.output = {
        filename: 'bundled.js',path: path.resolve(__dirname,'app')
    }
    config.devServer = {
        before: function(app,server){
            server._watch('./app/**/*.html')

        },contentBase: path.join(__dirname,'app'),hot: true,port: 3000,host: '0.0.0.0'
    }
    config.mode = 'development'


}

这是我的 App.js 文件的配置方式：

import '../fonts/stylesheet.css'
import '../styles/styles.css'

if(module.hot){
    module.hot.accept()
}

CSS 已应用于我的根 index.html 文件，但不适用于我 250ff 目录中的文件，因为捆绑似乎不适用于该文件。我尝试了多种设置，但无法使其正常工作。我哪里出错了？

解决方法

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

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

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