如何使用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
                }
            }],
        },
]