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/
  }]

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