Webpack针对不同的js入口使用不同的加载器

Question

您能使用不同的加载器加载第二个入口吗？

例如，我正在尝试创建一个离线缓存的服务工作者。我已经排除了包含服务工作者的文件夹，并将其包含在另一个文件夹中。没有调用service-worker.js（它只是手动加载到静态index.html中）。服务工作者入口点正在选择React和热加载器，而不仅仅是通过Babel进行处理。以下是我的配置的要点。

entry: {
     app: "app.js",
     'service-worker': 'persistence/service-worker.js'
},
module: {
    loaders:[{
        test: /\.js|\.jsx/,
        loaders: ["react-hot", "jsx?harmony", "babel"],
        exclude: /persistence/
    }, {
        test: /service\-worker\.js/,
        loaders: ["babel"],
        include: /persistence/
  }]

- puppybits

---

我不明白为什么这样的东西不能工作。你在设置方面遇到了一些特别的问题吗？ - Juho Vepsäläinen

服务工作者入口使用所有 JavaScript 包构建，而不仅仅包括持久化文件夹中的一个文件。 - puppybits

也许最安全的选择是为您的服务工作者定义一个单独的配置。对我来说，这似乎是最干净的解决方案。 - Juho Vepsäläinen

我遇到了相同的情况，你的解决方案有效！只需检查条目和加载器是否完全匹配即可。 - Guichi

Answer 1

我决定使用文件加载程序（使用babel-loader预处理js文件）。它在热加载器以及我的生产Docker/Node环境中都可以工作。

loaders: {
  {
    test: /\.(js|jsx)$/,
    include: [/src/,/bower_components/],
    exclude: [/persistence/],
    loader: 'jsx?harmony!babel'
  }, {
    test: /\.js$/,
    include: [/persistence/],
    loader: 'file?name=[name].[ext]!babel'
  }, 
  ...
},

这个配置将文件夹从普通的JS文件中排除，并将Service Worker文件单独复制到站点的根目录中。

- puppybits

Answer 2

看起来你可以在入口点使用内联加载器语法来实现这一点（在Webpack 4.42.1中进行了测试）

以下的webpack.config.js将会应用raw-loader到script.js，但仅适用于script_raw入口点而不适用于script_plain入口点。

var path = require('path');

module.exports = {
  mode: 'development',
  entry: {
      'script_raw': 'raw-loader!./script.js',
      'script_plain': './script.js',
  },
  output: {
    path: '/app/out',
    filename: '[name].js'
  }
};

对于你的情况来说，这可能很快变得难以控制，但可以成为构建其他有趣事物的基础。

- Cobertos