CODEWITHSUNDEEP
javascriptwebpackwebpack-5
bunee
bunee

Reputation: 84

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

I'm trying to get Webpack to build Javascript and CSS files to their respective folders. I'm fairly new to Webpack and I can't seem to find the exact plugin that'll help me do this.

Here's what I'm trying to achieve:

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

enter image description here

The config file:

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"]
            }
        ]
    }
}

If I haven't made myself clear, Please feel free to ask me any questions.

Upvotes: 3

Views: 3086

Answers (1)

MaxO
MaxO

Reputation: 166

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

Upvotes: 4

Related Questions