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

Question

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

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.

@Thomas Sabik, Thank you for responding. Essentially, I want all my Javascript and CSS files from my src folder to be bundled and outputted into their respective folders which is under the dist folder meaning the "js" folder should have all the javascript files and the "css" folder should have all the css files. Am I being clear? — bunee
– bunee, Commented Aug 10, 2021 at 12:43
Didn't know Webpack creates CSS files. Usually the styles are included in the JavaScript modules. — Thomas Sablik
– Thomas Sablik, Commented Aug 10, 2021 at 20:08

MaxO · Accepted Answer · 2021-08-10 14:50:42Z

4

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

answered Aug 10, 2021 at 14:50

MaxO

1661 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bunee Over a year ago

Thanks for responding but, That doesn't seem to work...

MaxO Over a year ago

What happens when you try? Does it build the files properly, but not import the css, or something else entirely?

bunee Over a year ago

The js files do get built but not the css files. So I added another entry pointing to my css file like so: styles: path.resolve(__dirname, "src/css/style.css"). This does get the job done but, It also adds a "styles.js" file to my js folder :/ Here's the updated config file

bunee Over a year ago

After a few more hours of banging my head against the wall.... I realized I was never importing my style.css file into my app.js file. Thank you for your answer, I'll go flush myself down the toilet :)

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related