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

Question

我要输出：

• 将所有.js个文件放入文件夹js中
• 将所有.css个文件都放入styles中
• [像.svg | .png | .jpeg的所有媒体都变成“资产”，所以上。

我的配置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
                    }
                }]
       }]