根據文件擴展名構建多個Webpack

Question

我想知道是否可以在Webpack中獲得構建配置，類似於基於擴展名的.ios.js和.android.js的react-native處理ios/android構建方式分別。

爲了詳細說明，給出該目錄結構：

app/ 
    index.js 
    components/ 
    button.web.js 
    button.mobile.js 

我想獲得

build/ 
    web/app.js 
    mobile/app.js 

有沒有人有一個想法，如果這甚至有可能用的WebPack？

Answer 1

是的，使用resolve.extensions。例如，這的WebPack配置片段：

resolve: { 
    extensions: ['', '.js', '.mobile.js'] 
} 

會造成的WebPack在遭遇require('./button')時尋找button，button.js終於button.mobile.js。您可以將擴展名作爲命令行參數。例如，如果您添加yargs到項目，並使用它，像這樣的的WebPack配置文件：

const argv = require('yargs').argv; 
... { 
    resolve: { 
     extensions: ['', '.js', '.' + argv.target + '.js'] 
    } 
} 

然後webpack --target=mobile也將包括在包.mobile.js文件，同樣爲webpack --target=web或任何其他目標。

請注意，如果button.js和button.mobile.js都存在，則首先找到的將被要求，其餘所有其他 - 將被忽略。如果您有組件的通用部件和平臺特定部件，則必須將這兩部分放入具有不同名稱和require的文件中 - 例如button.js和button-platform.mobile.js;然後var button = require('./button'); var buttonPlatform = require('./button-platform');併合並兩者。

編輯：問題的答案的第二部分

所找輸出文件夾結構可以被創建，再次，使用yargs - 從上面只需將--target參數到的WebPack配置的output部分：

output: { 
    path: path.join(__dirname, argv.target); 
    filename: 'app.js' 
}