javascript - Webpack - 编译两个具有不同 Assets 路径的输出包

Question

我正在尝试使用 Webcomponents 构建网站。问题是，我需要两个不同的包，它们在 CSS 中具有不同的图像路径。路径保存在 CSS 文件中，并且必须保持相对。

这是我目前用来生成 CSS 部分的构建管道。

...
test: /\.css|\.scss$/,
use: [
  {
    loader: 'polymer-css-loader',
    options: {
      minify: false
    }
  },
  'extract-loader',
  'css-loader',
  'postcss-loader',
  'sass-loader'
]
...

我可以使用文件加载器更改路径以发出图像的公共(public)路径。问题是，我需要一个包使用原始路径，一个包使用另一条路径。

...
test: /\.(png|gif|jpg|svg)$/,
use: [
  {
    loader: 'file-loader',
    options: {
      name: 'static/images/[name].[ext]',
      emitFile: false
    }
  }
]
...

Answer 1

您可以将两个配置传递给 webpack，并根据您的需要在每个配置中配置文件加载器:

    module.exports = [
        {
            entry: './example',
            output: {
                path: path.join(__dirname, "dist"),
                filename: 'app1.js'
            },
            module: {
                rules: [
                    {
                        test: /\.(png|gif|jpg|svg)$/,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: 'static/images/[name].[ext]',
                                    emitFile: false
                                }
                             }
                         ]
                      }

       },

       {
           entry: './example',
           output: {
               path: path.join(__dirname, "dist"),
               filename: 'app2.js'
           },
           module: {
               rules: [
                   {
                       test: /\.(png|gif|jpg|svg)$/,
                       use: [
                           {
                               loader: 'file-loader',
                               options: {
                                   name: 'static/other/path/images/[name].[ext]',
                                   emitFile: false
                                }
                            }
                         ]
            }

         }
]

更多信息 https://github.com/webpack/webpack/tree/master/examples/multi-compiler