javascript - Webpack-merge 不访问公共(public)配置变量

Question

据我了解，webpack-merge 帮助我们将 webpack.config 文件分解为更易于管理的 block ，添加与环境相关的配置。

While we will separate the production and development specific bits out, note that we'll still maintain a "common" configuration to keep things DRY. In order to merge these configurations together, we'll use a utility called webpack-merge. With the "common" configuration in place, we won't have to duplicate code within the environment-specific configurations.
- Webpack - production

我的 webpack.prod.js 中的代码是这样的:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
            'file-loader'
        ],
        exclude: [
          path.resolve(__dirname, "node_modules") //NEED TO ACCCESS PATH VARIABLE HERE
        ]
      }
  ]
}

在我的 webpack.common.js 中是我认为 webpack.prod.js 可以访问的变量 path 。我假设它没有，因为我遇到了一个错误:

ReferenceError: path is not defined

问题

如何访问通用配置？我是否误解了 webpack-merge 的概念？

Answer 1

webpack-merge 将获取两个 js 对象并使用 lodash 合并它们 mergeWith .所以基本上它返回一个包含两个对象属性的对象。

它无法为您提供 path 变量或任何其他变量。您需要将其隐式导入到您的 webpack.prod.js 文件中。