webpack - 如何根据入口应用不同的loader？

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 个文件:一个用于公共(public)页面的脚本和一个用于管理面板的脚本。这些条目导入另一个 JS 文件，包括一些共享文件。我需要公共(public)脚本来支持许多浏览器，并需要管理面板脚本来仅支持最新的 Chrome。

我想通过根据条目使用不同的浏览器设置来实现它，这样如果在公共(public)条目中使用JS文件，则加载一个设置，如果使用文件在管理条目中，它加载了其他设置。如何在 Webpack 4 中做到这一点？

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

Answer 1

I need the public script to support many browsers and the admin panel script to support only the latest Chrome. I want to achieve it by using different browsers setting depending on the entry.

babel 支持每个目录的多个配置(递归地找到 babel 配置文件，直到找到 package.json:

Babel loads .babelrc (and .babelrc.js / package.json#babel) files by searching up the directory structure starting from the "filename" being compiled (limited by the caveats below). This can be powerful because it allows you to create independent configurations for subsections of a package. Source: 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 中使用以下代码尝试了此操作p>

[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;

希望有帮助。