javascript - 使用 Babel 和 Webpack 生成多个输出

Question

我想将我的 Javascript 应用程序转换成两个不同的 Javascript 文件:
第一个用于旧版浏览器
第二个用于现代浏览器
计划为现代移动浏览器构建更小的版本，同时仍支持较旧的遗留桌面浏览器。

babel-cli 允许预设，因此我可以将其设置为“env”，但似乎没有办法在 .babelrc< 之外设置目标浏览器/em> 这意味着必须更改 .babelrc 文件。

Webpack 允许使用 babel-loader 来指定目标浏览器，但似乎没有办法针对不同的浏览器目标使用它两次环境

有什么方法可以简单地实现我所需要的吗？

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"]
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }
});