CODEWITHSUNDEEP
javascriptwebpackbundle
Dima Vak
Dima Vak

Reputation: 619

How to output different file extension into different directories with Webpack?

I want to output:

My config https://jsfiddle.net/sicely/43w28stq/

Upvotes: 2

Views: 2432

Answers (1)

Legends
Legends

Reputation: 22702

In your webpack.config.js file:

JS files 

  output: { 
            filename: './js/[name].bundle.js',    // prepend folder name
            path: path.resolve(__dirname, 'dist'),
            chunkFilename: './js/chunkFilename.[name].bundle.js'    // prepend folder name
     },

CSS files:

plugins:[ 
   new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash].css',  // prepend folder name
        chunkFilename: 'css/[name].[id].css',    // prepend folder name
        ignoreOrder: false,
    }),
],

Images

rules:[
  {       
            test: /\.(png|svg|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    outputPath: 'images'  // folder name
                }
            }],
        },
]

Fonts

 rules:[{  
       test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: 'fonts'  // folder name
                    }
                }]
       }]

Upvotes: 4

Related Questions