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']
}

会在遇到button时导致Webpack查找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参数插入到webpack配置的output部分：

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

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

1 个答案: