如何根据入境申请不同的装载机？

Question

我有一个包含2个条目的Webpack配置：

const path = require('path');

module.exports = {
  entry: {
    public: './src/public.js',
    admin: './src/adminPanel.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['last 5 years']
                }
              }]
            ]
          }
        }]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

它生成2个文件：公共页面的脚本和管理面板的脚本。这些条目导入另一个JS文件，包括一些共享文件。我需要公共脚本来支持许多浏览器和管理面板脚本，以仅支持最新的Chrome。

我希望通过使用不同的browsers设置来实现它，具体取决于条目，以便如果在公共条目中使用JS文件，则会加载一个设置，如果在admin条目中使用了文件，则会加载其他设置。如何在Webpack 4中做到这一点？

我知道我可以通过exporting 2 Webpack configurations解决我的问题，但我想知道如何使用不同的加载器或根据条目文件调整加载器选项。

Answer 1

我需要公共脚本来支持许多浏览器和管理面板脚本，以仅支持最新的Chrome。我想通过使用不同的浏览器设置来实现它，具体取决于条目。

babel支持每个目录的多个配置（递归到它找到一个babel配置文件到达package.json：

Babel通过从正在编译的“文件名”开始搜索目录结构来加载.babelrc（和.babelrc.js / package.json＃babel）文件（受以下警告限制）。这可能很强大，因为它允许您为包的子部分创建独立配置。资料来源：babel docs

目前，您已将babel配置放置在项目范围内应用的webpack配置中。您可以做的是从您的webpack中删除babel配置，将您的adminPanel.js和public.js放在不同的目录中，每个目录都有自己的.babelrc（或其他babel配置）文件，它们具有不同的@babel/presets-env目标。

.
├── src
|   ├── admin
|   |   ├── adminPanel.js
|   |   ├── .babelrc
|   |
|   ├── public
|   |   ├── public.js
|   |   ├── .babelrc
|
├── package.json

你的./src/admin/.babelrc可能看起来像：

{
    "presets": [["@babel/preset-env", {
        "targets": "chrome 70"
    }]]
}

而你的./src/public/.babelrc：

{
    "presets": [["@babel/preset-env", {
        "targets": "last 5 years"
    }]]
}

我刚刚在./src/admin/adminPanel.js和./src/public/public.js中使用以下代码尝试了这个

[1, 2, 3].map(num => `number ${num}`)

let [x, y, z] = [2, 4, 6]

哪个webpack和babel已经转变为

// ./dist/admin.js
[1, 2, 3].map(num => `number ${num}`);
let [x, y, z] = [2, 4, 6];

和

// ./dist/public.js
[1, 2, 3].map(function (num) {
  return "number ".concat(num);
});
var x = 2,
    y = 4,
    z = 6;

希望能帮助到你。