如何在項目之間共享webpack.config片段？

我有幾個webpack配置與非常類似的webpack.config文件。我喜歡把webpack.config部分放在一個共享模塊中（我用「npm link」包含了共享模塊），但是由於它是第一個依賴，所以不能找到依賴關係，比如「webpack」。如何在項目之間共享webpack.config片段？

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線：

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

我怎麼能指示的WebPack搜索在包括webpack.config項目node_modules所包含的相關性？

我試圖通過添加以下的決心webpack.config部分來實現這一點，但是這並不能幫助：

模塊：[path.resolve（__目錄名稱，「node_modules」），「node_modules 「]

我認爲它不是由webpack.config本身使用，而是由webpack.config處理的JS代碼使用。

來源

2017-07-17 edbras

你設法找到了一個解決方案，我有同樣的要求，我一直在四處尋找，幾乎沒有什麼 – Sedz

是的，正是我在2周前做了，忘了在這裏回答它，我現在。 – edbras

我通過傳入所需的根目錄作爲常用webpack配置的參數來解決它，並使用它來更改用於查找插件和其他內容的__dirname變量。

在代碼：的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部分：

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

}

來源

2017-08-27 20:48:36 edbras

如何在項目之間共享webpack.config片段？

回答

相關問題