Question

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

这是我目前用于生成CSS部分的构建路线。

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

我可以使用文件加载器更改路径以发出图像的公共路径。问题是，我需要一个捆绑包使用原始路径，而一个捆绑包使用其他路径。

...
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

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

1 个答案: