Webpack

Question

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

这是我目前用来生成 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

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

Webpack - Compile two output bundles with different asset paths

javascript

css

sass

web-component