根据文件扩展名构建多个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' 
}