时间戳

首页 > 解决方案 > 如何使用 Webpack 将 Javascript 和 CSS 文件捆绑到特定文件夹？

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

问题描述

我正在尝试让 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"]
            }
        ]
    }
}

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

标签： javascriptwebpackwebpack-5

解决方案

You can set the filename property that you're passing to MiniCssExtractPlugin to "css/style.css"

推荐阅读