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

user_13216414 0
Viewed 999

I want to output:

  • All .js files into folder js
  • All .css files into styles
  • All media like a .svg | .png | .jpeg into 'assets' and so on.

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

webpack bundle javascript
1 Answers

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
                    }
                }]
       }]
user_25815620
Related