基于文件扩展名的多个 Webpack 构建

Question

我想知道是否可以在 Webpack 中获得类似于 React-native 处理 ios/android 基于扩展名的构建配置：分别为 .ios.js 和 .android.js。

详细说明一下，给出以下目录结构：

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去寻找button，button.js最后button.mobile.js遇到的时候require('./button')。您可以将扩展设置为命令行参数。例如，如果您添加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上面的参数插入outputwebpack 配置部分：

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