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

[edit] 似乎有一些＆＃34;变通办法＆＃34; 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
  }
}

但我不确定如何使用多个加载器。

根据Code Module Management和workarounds you mention，您还可以内联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)}`
  }
}

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

1 个答案: