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

我想输出：

• 将所有

  .js

  文件放入文件夹

  js

• 将所有

  .css

  文件转换为

  样式

• 所有媒体，如

  .svg |.png |.jpeg

  进入“资产”等 开

---

我的配置

在您的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
                    }
                }]
       }]

字体

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

---

您希望输出像这样吗？或者您希望输入看起来像这样？如果是输入，我会说只需查看.js的所有文件夹和.css的所有文件夹等，然后按照您想要的方式组织它。@JamesHarrington我想要输出如下所示。现在在我的'dist'文件夹中有任何目录，但我想通过扩展库拆分文件以获得帮助，我完全按照你说的做。但现在我有另一个问题。我有一个404错误，因为字体路径错误。现在是dist/font，但需要dist/style/font。你能再帮我一次吗？