Wie kann ich webpack.config-Snippets zwischen Projekten freigeben?

Question

Ich habe mehrere Webpack-Konfigurationen mit sehr ähnlichen webpack.config-Dateien. Ich teile gerne webpack.config Teile in ein geteiltes Modul ein (ich schließe das geteilte Modul mit "npm link" ein), aber das funktioniert nicht, da keine Abhängigkeiten wie "webpack" gefunden werden können, da es die erste Abhängigkeit ist .

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) 

Erste webpack.config Linien:

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

Wie kann ich anweisen webpack für die enthaltenen Abhängigkeiten in node_modules des Projekts zu suchen, die den webpack.config enthält?

ich versucht, dies zu dem Entschluss webpack.config Abschnitt, indem Sie das folgende zu realisieren, aber das hilft nicht:

Module: [path.resolve (__ dirname "node_modules"), „node_modules "]

Ich denke, es wird nicht von der webpack.config selbst verwendet, sondern von dem JS-Code, der von webpack.config verarbeitet wird.

Answer 1

Ich habe es gelöst, indem ich das erforderliche root dir als Argument an die gemeinsame webpack-config übergeben habe, und benutze das, um die Variable __dirname zu ändern, die zum Finden von Plugins und anderem Zeug benutzt wird.

In Code: Die 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; 
} 

Und der gemeinsame webpack.config Teil, der das Argument erhält:

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'); 
.... 

}