使用Babel和Webpack生成多个输出

Question

我想将我的Javascript应用程序转换为两个不同的Javascript文件:
第一个用于旧版浏览器
第一个用于现代浏览器第二个用于现代
移动浏览器,同时仍支持较旧的旧桌面浏览器.

在巴贝尔-CLI允许预设的,所以我可以将它设置为"ENV",但似乎没有要设置外部目标浏览器的方式.babelrc这意味着必须更改.babelrc文件.

Webpack允许使用babel-loader来指定目标浏览器,但似乎没有一种方法可以在env上为不同的浏览器目标使用它两次.

有没有办法简单地实现我的需要？

Answer 1

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

包.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"
}

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

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