Webpack 不同的 loader 用于不同的 js 条目

Question

您可以使用不同的加载器集加载辅助条目吗？

例如，我正在尝试创建一个用于离线缓存的服务 worker 。我已经排除了包含 service worker 的文件夹并将其包含在另一个文件夹中。没有对 service-worker.js 的调用(它只是手动加载到静态 index.html 中)。 service-worker 的入口点是选择 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/
  }]

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 文件单独复制到站点的根目录中。