传递参数给基础Webpack配置

Question

我们正在尝试使用基础配置和多个入口配置来设置Webpack。 基础配置几乎可以完成所有工作，但根据构建目标包括一些额外的文件。我们已经按照以下方式设置了基础配置的输入：

const webpack = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = (env) => {
    return {
        entry: {
            ...
        },
        output: {
            ...
        },
        optimization: {
            ...
        },
        module: {
            ...
        },
        resolve: {
            ...
        },
        plugins: [
            ...
        ]
    };
};

配置设置如下：

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = (env) => {    
    return merge(common(env), {
        mode: 'production',
        plugins: [
            ...
        ]
    });
}

我的电脑可以正常运行，但其他人运行时会出现以下错误：

TypeError: common不是一个函数

这是将选项传递到entry和base webpack文件的最佳方法吗？在本地，一切似乎都正常工作，正确构建并运行。我们使用webpack.DefinePlugin使输入的条目在javascript应用程序中可用。

- user351711

---

你能发布webpack.common.js的内容吗？ - mehmetseckin

嗨Mehmet，感谢您的回复。typescript错误发生在第7行，第18个位置，即该行：return merge(common(env), {。common(env)的开头，因此它从未进入webpack.common.js。这是使用webpack将env对象传递下去的正确方法吗？还是有更好的方法可以在这台机器上工作？ - user351711

嗨。common is not a function 意味着在处理第一行时，require('./webpack.common.js') 并没有返回一个函数。我询问其内容的原因是为了理解为什么 ./webpack.common.js 没有导出 common 函数。这似乎应该可以工作，但如果你在使用任务运行器，你可能可以使用命令行参数，例如使用 yargs。 - mehmetseckin

嗨Mehmet，抱歉我理解你的意思，我已经去除了微小的细节并包含了整个文件。希望这不会偏离它本应该有的地方太远。 - user351711

嗨，我尝试创建这个最小化应用程序来复制这个问题，但似乎一切正常。你和其他遇到此错误的人能够无问题地运行此最小化应用程序吗？你和其他遇到此错误的人安装了相同版本的node、npm、webpack等吗？该错误似乎与webpack本身无关，而是与node有关。 - mehmetseckin

Answer 1

为了以后的参考，我只发布最小的可重现设置（对我来说效果很好），因为我删除了存储库。问题是合并问题，与webpack无关。

// file: src/hello-world.js
module.exports = () => {
    console.log("Hello, world!");
}

// file: src/index.js
const helloWorld = require('./hello-world');
helloWorld();

// file: webpack.common.js
module.exports = (env) => {
    console.log("./webpack.common: " + env + " was passed for argument 'env'.");
    return {
        mode: env
    }    
};

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

module.exports = (env) => {
    return merge(common(env), {});
};

// file: package.json
{
  "name": "webpack-param-repro",
  "version": "1.0.0",
  "description": "A minimal app to reproduce the problem in https://dev59.com/rq7la4cB1Zd3GeqPi8ms",
  "main": "dist/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mehmet Seckin",
  "repository": {
    "type": "git",
    "url": "https://github.com/seckin92/webpack-param-repro"
  },
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-merge": "^4.1.4"
  }
}

- mehmetseckin

Answer 2

这里有一个很好的替代方案 webpack-merge。不要重复造轮子，这个已经存在了 :)

- Iurii Budnikov

---

我相信OP已经在使用webpack-merge，请重新检查原始问题中提供的入口配置。 - mehmetseckin