使用Babel和Webpack生成多个输出

Question

我想将我的Javascript应用程序转换为两个不同的Javascript文件：
第一个是用于旧版浏览器的
第二个是用于现代浏览器的
计划在支持较老的传统桌面浏览器的同时，为现代移动浏览器提供更小的构建文件。 允许预设“env”，但似乎没有办法设置目标浏览器以外的.这意味着必须更改<.babelrc>文件。 允许使用来指定目标浏览器，但似乎没有办法在env上使用它两次以针对不同的浏览器目标。

有没有简单实现我所需的方式？

- PhilF

Answer 1

所以我找到了一种自己解决的方法，不确定它是否是最优雅的解决方案，但它可以工作。该解决方案使用webpack-merge来拥有多个webpack配置。以下是测试项目文件（在此测试示例中，“npm run buildlegacy”和“npm run buildios”之后进行重要的工作）：

package.json:

{
  "name": "testbabel",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.js",
  "dependencies": {
    "webpack": "^3.11.0",
    "webpack-merge": "^4.1.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1"
  },
  "scripts": {
    "buildios": "webpack --config ./ios.config.js",
    "buildlegacy": "webpack --config ./legacy.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

base.config.js:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        app:'./src/app.js'
    }
};

ios.config.js:

const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
    output: {
        path: __dirname + '/dist',
        filename: 'ios11.bundle.js',
      },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    "presets": [
                        ["env", 
                            {
                                "targets": {
                                "browsers": ["ios_saf 11"]
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }
});

legacy.config.js:

const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
    output: {
        path: __dirname + '/dist',
        filename: 'legacy.bundle.js',
      },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    "presets": [
                        ["env", 
                            {
                                "targets": {
                                "browsers": ["> 1%", "last 2 versions", "ie 8"]
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }
});

- PhilF

---

一个文件：module.exports = [iosConfig, legacyConfig] - Frondor