的WebPack DefinePlugin使用外部config.js

我是新的的WebPack 我在webpack.config.js的WebPack DefinePlugin使用外部config.js

var path = require('path'); 
var webpack = require('webpack'); 
var pkg = require('./package.json'); 
var myconfig = require('./webpack.myconfig.js'); 

// bundle dependencies in separate vendor bundle 
var dependencies = Object.keys(pkg.dependencies).filter(function (el) { 
    //exclude font packages from vendor bundle & css-toggle-switch 
    if (el.indexOf('font') !== -1 || el.indexOf('css-toggle-switch') !== -1) { 
    return false; 
    } 
    else return true; 
}); 

module.exports = { 
    entry: { 
     libs: dependencies, 
     main: './src/index' 
    }, 
    output: { 
    path: path.join(__dirname, myconfig.buildPath), 
    publicPath: myconfig.uiURL, 
    filename: 'dist/js/[name].js', 
    chunkFilename: '[id].[name].js' 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     DEBUG_MODE: JSON.stringify(false), 
     TIMEOUT: JSON.stringify(30000), 
     API_URL: JSON.stringify(myconfig.apiUrl), 
     "process.env": { 
     NODE_ENV: JSON.stringify("production") 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'libs', 
     filename: 'dist/js/libs.js', 
     minChunks: Infinity 
    }) 
    ], 
};

此代碼，這是myconfig.js

myconfig = { 
    uiURL: 'http://example.com/', 
    apiUrl: 'http://api.example.com/api/' 
}; 

module.exports = myconfig;

，如果我跑這句法

webpack -p --config webpack.config.js --progress --colors

我會像

結果

/dist/js/libs.js 
/dist/js/main.js

，但我想要的結果不是這樣，我希望得到的結果是：

/dist/js/myconfig.js 
/dist/js/libs.js 
/dist/js/main.js

真正我想要的是，我想在main.js文件，它將使用myconfig.apiUrl作爲依賴，所以當我部署到生產或qserver，我只是改變myconfig.js。

謝謝

來源

2017-07-06 edidiway

webpack.myconfig.js中的WebPack配置文件是用來讓你有當webpack.myconfig.js改變重建每次。

您可以使用myconfig.json併發送http請求來動態獲取它。

來源

2017-07-06 07:36:33

如果您只想獲得myconfig.js在/dist/js/，您可以使用CopyWebpackPlugin。它可以將靜態文件從一個路徑複製到另一個路徑。從一個路徑

plugins: [ 
    new CopyWebpackPlugin([{ from: APP_DIR + '\\images', to: APP_DIR + '\\build\\images' }]), 
    new webpack.DefinePlugin({ 
     DEBUG_MODE: JSON.stringify(false), 
     TIMEOUT: JSON.stringify(30000), 
     API_URL: JSON.stringify(myconfig.apiUrl), 
     "process.env": { 
     NODE_ENV: JSON.stringify("production") 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'libs', 
     filename: 'dist/js/libs.js', 
     minChunks: Infinity 
    }) 
    ],

這裏CopyWebpackPlugin拷貝文件到另一個：

添加新新行plugins節等。

確保您var CopyWebpackPlugin = require('copy-webpack-plugin');在通過npm安裝的webpack.config.js &在package.json &添加相同的頂部。

來源

2017-07-06 08:02:23

的WebPack DefinePlugin使用外部config.js

回答

相關問題