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

【问题标题】：Webpack different loaders for different js entriesWebpack 不同的 loader 用于不同的 js 条目
【发布时间】：2015-07-07 19:10:49
【问题描述】：

你能用一组不同的加载器加载辅助条目吗？

例如，我正在尝试创建一个用于离线缓存的服务工作者。我已经排除了包含服务人员的文件夹并将其包含在另一个文件夹中。没有对 service-worker.js 的调用（它只是在静态 index.html 中手动加载）。 service-worker 的入口点是使用 React 和 hot loader，而不是仅仅通过 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/
  }]

【问题讨论】：

我不明白为什么这样的事情不起作用。您的设置有什么特殊问题吗？
service-worker 条目使用所有 javsscript 包构建，并且不只包含持久性文件夹中的 1 个文件。
也许最安全的选择是为您的服务人员定义一个单独的配置。这对我来说似乎是最干净的解决方案。
我也遇到同样的情况，你的解决方法有效！只需检查条目和加载器是否完美匹配

标签： webpack

【解决方案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 文件复制到站点的根目录中。

【讨论】：

【解决方案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'
  }
};

这对于你的情况来说很快就会变得笨拙，但可能是做其他有趣事情的基石。

【讨论】：