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文件，则它会加载一个设置，并且如果在管理员中使用文件条目，它会加载其他设置。如何在Webpack 4中做到这一点？

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

Answer 1

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

babel支持每个目录多个配置（递归地找到一个babel的{{1}}配置文件：

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

当前，您已将package.json配置放入Webpack配置中，该配置已在整个项目中应用。您可以做的是从Webpack中删除babel配置，将babel和adminPanel.js放在单独的目录中，每个目录都有自己的public.js（或其他babel配置）文件， .babelrc有不同的目标。

@babel/presets-env

./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];

希望有帮助。

如何根据条目应用不同的装载机？

1 个答案: