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

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'
  }
};

对于您的情况，这会很快变得笨拙，但可能是做其他有趣事情的基础。

Webpack不同的加载器用于不同的js条目

2 个答案: