获取webpack入口点名称并在加载器中重用

Question

我正在尝试根据入口点将一些数据传递给SCSS。我将有两个主题，因此我必须知道当前打包的主题是什么。

Webpack入口点：

webpack: {
    entry: {
        toyota: path.resolve(__dirname, '../entries/theme.toyota.js'),
        lexus: path.resolve(__dirname, '../entries/theme.lexus.js'),
    },

接下来，我希望识别入口点，并将其作为变量传递给SCSS：

  test: /\.s?css$/,
    exclude: /node_modules/,
    use: [{
            loader: 'sass-loader',
            options: {
                data: '$brand: "' + entryPointName +'";',
                sourceMap: true
            }
        },
    ]

我已经尝试过[name]，但没有成功...

通过以不同的ENV变量重新运行构建，我可以实现这个目标，但我希望能够使用一个任务来完成（以在监视模式下更快地构建）。

有没有办法实现这个目标？

- SimonRabbit

---

经过一番调查，发现这是不可能的。你可以在使用优化选项（https://webpack.js.org/configuration/optimization/#optimizationruntimechunk）时从分割块中访问名称，但这对后续构建没有影响，因为配置已被解析而不会再次运行第二个入口点。我的解决方案是使用两个构建任务，并使用npm-run-all将它们组合起来。 - SimonRabbit

Answer 1

最终的解决方案是使用webpack层次结构...

webpack: {
    entry: {
        toyota: { import: path.resolve(__dirname, '../entries/theme.toyota.js'), layer: 'toyota' },
        lexus: { import: path.resolve(__dirname, '../entries/theme.lexus.js'), layer: 'lexus' },
    },
    experiments: {
        layers: true,
    },

test: /\.s?css$/,
exclude: /node_modules/,
oneOf: [
    {
        issuerLayer: 'toyota',
        use: [{
                loader: 'sass-loader',
                options: {
                    data: '$brand: "toyota";',
                    sourceMap: true
                }
            },
        ]
    },
    {
        issuerLayer: 'lexus',
        use: [{
                loader: 'sass-loader',
                options: {
                    data: '$brand: "lexus";',
                    sourceMap: true
                }
            },
        ]
    },
]

- mikep

Answer 2

针对寻找多个动态入口的解决方案的任何人：

在你的webpack配置文件中，首先获取入口点并将它们存储起来，确保使用层名称为每个入口点命名，例如：

const SRC_DIR = path.resolve(__dirname, '../src');

function getEntries() {
  return glob.sync(SRC_DIR + '/**/index.tsx').reduce((acc, path) => {
    const entry = path.replace('/index.tsx', '').replace(SRC_DIR + '/', '')
    acc[entry] = {import: path, layer: entry}
    return acc
  }, {})
}
const entries = getEntries();

接下来，为每个图层创建您想要的加载器配置。在这个例子中，我使用同样的配置为每个图层，但是你可以获取 layer_name 的值，并在map函数内返回不同的加载器集合，例如：

：

const layer_names = Object.keys(entries);
const layers = layer_names.map(layer_name => ({
  issuerLayer: layer_name,
  use: [
    "to-string-loader", 
    "css-loader", 
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          config: path.resolve(__dirname, "../postcss.config.js"),
        },
      },
    }
  ]
}));

最后，添加您的层和入口点配置：

module.exports = env => {
  return merge([
    {
      entry: entries,
      experiments: {
        layers: true
      },
      module: {
        rules: [
          {
            test: /\.css$/i,
            oneOf: layers
          },
...

- Martin Carstens