Webpack 如何输出不同的文件扩展名到不同的目录？

Question

我要输出：

将所有 .js 个文件放入文件夹 js
所有 .css 个文件放入 styles
所有媒体如 .svg | .png | .jpeg 变成 'assets' 等等上。

我的配置https://jsfiddle.net/sicely/43w28stq/

Answer 1

在您的 webpack.config.js 文件中：

JS 文件

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

CSS 个文件：

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

图片

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

字体

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

Webpack 如何输出不同的文件扩展名到不同的目录？

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

javascript

bundle

webpack