javascript - 当有多个链式加载器时，一致的 webpack 选项

Question

在 webpack 中，一些加载器具有查询选项:

module: {
    loaders: [
        {
            test:   /\.css$/,
            loader: `css?minimize&root=${path.resolve('.')}!postcss`
        }
    ]
},

以及其他人在自己的部分，例如postcss

module: {
    loaders: [
        {
            test:   /\.css$/,
            loader: "style!css!postcss"
        }
    ]
},
postcss: function () {
    return [autoprefixer, precss];
}

有没有办法将所有加载器选项移至 postcss 等主选项中，而不是使用查询来确保一致性？理想情况下，以下内容可行:

module: {
    loaders: [
        {
            test:   /\.css$/,
            loader: "style!css!postcss"
        }
    ]
},
css: {
    minimize: true,
    root: path.resolve('.')
}
postcss: function () {
    return [autoprefixer, precss];
}

[编辑]似乎有一些“解决方法”here从2014年开始，但没有真正的解决方案。

Answer 1

如果你能做到这一点:

{
    test: /\.png$/,
    loader: "url-loader",
    query: { mimetype: "image/png" }
}

那么你应该能够做到这一点:

const URL_LOADER_CONFIG = { mimetype: "image/png" }

module.exports = {
  // ...
  {
    test: /\.png$/,
    loader: "url-loader",
    query: URL_LOADER_CONFIG
  }
}

但我不确定它如何与多个加载器一起工作。

根据 workarounds you mention和 docs您还可以内联 JSON:

const URL_LOADER_CONFIG = { mimetype: "image/png" }
const OTHER_LOADER_CONFIG = { other: "config" }

const q = (config) => JSON.stringify(q)

module.exports = {
  // ...
  {
    test: /\.png$/,
    loader: `url-loader?${q(URL_LOADER_CONFIG)}!other-loader?${q(OTHER_LOADER_CONFIG)}`
  }
}