时间戳

首页 > 解决方案 > Webpack-merge 不访问公共配置变量

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

问题描述

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

虽然我们将生产和开发的特定部分分开，但请注意，我们仍将保持“通用”配置以保持干燥。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的实用程序。有了“通用”配置，我们就不必在特定于环境的配置中复制代码。
- Webpack - 生产

我的代码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的变量。我假设它不是，因为我遇到了一个错误：pathwebpack.prod.js

ReferenceError: path is not defined

问题

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

标签： javascriptwebpackproduction-environment

解决方案

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

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

推荐阅读