具有多个 html/js/css 文件的 Webpack，用于多个页面到多个目录

Question

我有一个如下所示的项目设置：

项目

• 数据

  • 公共
    • 页数
      • main --> 这里需要一个 html 包
      • 设置 --> 这里需要一个 html 包
      • admin --> 这里需要一个 html 包

• 前端

  • 公共
    • 页数
      • 主要
        • 脚本
        • 风格
        • html
      • 设置
        • 脚本
        • 风格
        • html
      • 管理员
        • 脚本
        • 风格
        • html

我在 frontEnd 文件夹中工作，我想将我的文件捆绑到数据文件夹中。

我不知道该怎么做。

这是我的

webpack.config.js

文件

const path = require('path');
const CompressionPlugin = require("compression-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
// npm run build for packing everything

const dataPath = "/data/public/pages/";
const frontEndPath = "/frontEnd/public/pages/";

module.exports = {
    context: path.resolve(__dirname, ''),
    mode: "production",
    devtool: 'eval-source-map',
    experiments: {
        topLevelAwait: true
    },
    entry: {
        '/data/public/pages/main/bundle/main.bundle': '/frontEnd/public/pages/main/scripts/main.js',
        '/data/public/pages/settings/bundle/settings.bundle': '/frontEnd/public/pages/settings/scripts/settings.js',
        '/data/public/pages/admin/bundle/admin.bundle': '/frontEnd/public/pages/admin/scripts/admin.js',
        '/data/public/pages/builder/bundle/builder.bundle': '/frontEnd/public/pages/builder/scripts/builder.js',
        '/data/public/pages/editor/bundle/editor.bundle': '/frontEnd/public/pages/editor/scripts/editor.js',
        '/data/public/pages/login/bundle/login.bundle': '/frontEnd/public/pages/login/scripts/login.js',
        '/data/public/pages/hardwares/bundle/hardwares.bundles': '/frontEnd/public/pages/hardwares/scripts/hardwares.js',
        '/data/public/pages/graphs/bundle/graphs.bundle': '/frontEnd/public/pages/graphs/scripts/graphs.js',
        '/data/public/pages/welcomeSetup/bundle/welcomeSetup.bundle': '/frontEnd/public/pages/welcomeSetup/scripts/main.js',
    },
    output: {
        path: path.resolve(__dirname, ''),
        filename: '[name].js'
    },
    plugins: [
        new CompressionPlugin(),
    ],
    optimization: {
        chunkIds: 'total-size',
        mergeDuplicateChunks: true,
        minimize: true,
    },
    resolve: {
        alias: {
            assets: '/frontEnd/public/assets/',
        },
    }
};

使用此配置文件，我可以将不同的 js 文件捆绑到它们相应的文件夹中，但我必须将其余部分复制/粘贴到数据文件夹中，例如我的 css 文件和 html 文件。

我试过

HtmlWebpackPlugin

没有像这样成功

const path = require('path');
const CompressionPlugin = require("compression-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

let htmlPages = [
    {
        name:"main/index",
        script: '/frontEnd/public/pages/main/scripts/main.js'
    },
];
let multipleHtmlPlugins = htmlPages.map(page => {
  return new HtmlWebpackPlugin({
    template: `/frontEnd/public/pages/${page.name}.html`,
    filename: `${page.name}.html`,
    chunks: [`${page.script}`]
  })
});

module.exports = {
  plugins: [
    new CompressionPlugin(),
    new HtmlWebpackPlugin({
      chunks: ['main']
    })
  ].concat(multipleHtmlPlugins),
};

不知何故，我需要创建一个 html 文件，其中包含我的捆绑 js 文件以及我的 css 文件。一切都压缩了。

这可能吗？如果是这样，怎么办？如果我遗漏了任何细节，请告诉我。