如何使用 Webpack 将 Javascript 和 CSS 文件捆绑到特定文件夹？

Question

我正在尝试让 Webpack 将 Javascript 和 CSS 文件构建到它们各自的文件夹中。我是 Webpack 的新手，我似乎找不到可以帮助我做到这一点的确切插件。

这是我想要实现的目标：

dist
   |___js
   |     |__app.js
   |     |__vendor.js
   |
   |___css
   |      |__style.css
   |
   |___index.html

配置文件：

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

module.exports = {
    mode: "development",

    entry: {
        app: path.resolve(__dirname, "src/js/app.js")
    },

    output: {
        path: path.resolve(__dirname, "dist/js"),
        filename: "[name].[contenthash].bundle.js",
        clean: true
    },

    devtool: "inline-source-map",

    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        port: 5001,
        open:true,
        hot: true,
        watchContentBase: true
    },

    plugins: [new HtmlWebpackPlugin({
        filename: "main.html",
        template: path.resolve(__dirname, "src/index.html")}), 

        new MiniCssExtractPlugin({
            filename: "main.css"
        })
            ],

    module: {
        rules: [    
            {
                test: /\.js$/,
                exclude: /node_modules/
            },

            {
                test:/\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    }
}

如果我没有说清楚，请随时问我。

Answer 1

您可以将传递给 MiniCssExtractPlugin 的文件名属性设置为 "css/style.css"

如何使用 Webpack 将 Javascript 和 CSS 文件捆绑到特定文件夹？

How can I bundle Javascript and CSS files to a specific folder with Webpack?

javascript

webpack

webpack-5