如何在项目之间共享 webpack.config 片段? [英] How can I share webpack.config snippets between projects?

问题描述

我有几个具有非常相似的 webpack.config 文件的 webpack 配置.我喜欢将 webpack.config 部分放在一个共享模块中(我包含带有npm 链接"的共享模块)，但这不起作用，因为找不到依赖项，例如webpack"，因为它是它遇到的第一个依赖项.

I have several webpack configurations with very similar webpack.config files. I like to put webpack.config parts in a shared module that (I include the shared module with "npm link"), but that doesn't work as can't find dependencies, like "webpack" as it's the first dependency it encounters.

17 07 2017 14:49:32.694:ERROR [config]: Invalid config file!
  Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:470:15)

第一行 webpack.config:

First webpack.config lines:

const webpack = require('webpack');
const path = require('path');
....

如何指示 webpack 在包含 webpack.config 的项目的 node_modules 中搜索包含的依赖项?

How can I instruct webpack to search for the included dependences in node_modules of the project that includes the webpack.config?

我试图通过将以下内容添加到 resolve webpack.config 部分来实现这一点，但这无济于事:

I tried to realise this by adding the following to the resolve webpack.config section, but that doesn't help:

模块:[path.resolve(__dirname, "node_modules"), "node_modules"]

modules: [path.resolve(__dirname, "node_modules"), "node_modules"]

我认为它不是由 webpack.config 本身使用，而是由 webpack.config 处理的 JS 代码使用.

I think it's not used by the webpack.config itself but by the JS code that is processed by webpack.config.

推荐答案

我通过将所需的根目录作为参数传递给通用 webpack 配置来解决它，并使用它来更改用于查找插件和其他的 __dirname 变量东西.

I solved it by passing in required root dir as argument to the common webpack config, and use that to change the __dirname variable that is used to find plugins and other stuff.

在代码中:webpack.config.js:

In code: The webpack.config.js:

const path = require('path');
const loader = require('lodash/fp');
const common = require('bdh-common-js/etc/webpack/webpack.config.common');

module.exports = function (env) {
    if (env === undefined) {
        env = {};
    }
    env.rootdir = __dirname; // Add the root dir that can be used by the included webpack config.

    const result = loader.compose(
        function () {
            return common(env)
        }
        // Any other "fragments" go here.
    )();

    // Customize the webpack config:
    result.entry = {
        entry: ['./src/entry.js', './src/js/utils.js'],
    }
    result.resolve.alias.Context = path.resolve(__dirname, 'src/js/context');
    ...... more stuff..
    return result;
}

以及接收参数的通用 webpack.config 部分:

And the common webpack.config part that receives the argument:

module.exports = function (env) { 
    if (env !== undefined) {
        if (env.rootdir !== undefined) {
            __dirname = env.rootdir;
        }
    }
  ....
    const node_modules = path.resolve(__dirname, 'node_modules');
    const webpack = require(node_modules + '/webpack');
    const CleanWebpackPlugin = require(node_modules + '/clean-webpack-plugin');
 ....

}

这篇关于如何在项目之间共享 webpack.config 片段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！