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

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中做到这一点？

我知道我可以通过导出2个Webpack配置来解决我的问题，但是我想知道如何使用不同的加载程序或根据条目文件调整加载程序选项。

Answer 1

\n

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

\n

\n\n

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

\n\n

\n

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

\n

\n\n

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

\n\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 admin\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 adminPanel.js\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .babelrc\n|   |\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public.js\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .babelrc\n|\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n

\n\n

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

\n\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 admin\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 adminPanel.js\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .babelrc\n|   |\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public.js\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .babelrc\n|\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

其中webpack和babel已转变为

\n\n

[1, 2, 3].map(num => `number ${num}`)\n\nlet [x, y, z] = [2, 4, 6]\n

\n\n

和

\n\n

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

\n\n

希望能帮助到你。

\n