按Marionette指南配置Webpack时遇未知属性'loaders'错误

嘿，这个问题我太熟了！你碰到的是Webpack版本迭代带来的配置语法变更：从Webpack 4开始，module配置下的loaders属性已经被官方废弃，取而代之的是rules属性——这就是你看到"未知属性'loaders'"错误的核心原因。

修改后的完整webpack.config.js配置 #

var webpack = require('webpack');

module.exports = {
  entry: './app/driver.js',
  module: {
    // 仅需把原来的loaders替换为rules即可
    rules: [
      { 
        test: /\.html$/, 
        loader: 'underscore-template-loader' 
      }
    ]
  },
  output: {
    path: __dirname + '/static/js',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({ _: 'underscore' })
  ],
  resolve: {
    modules: [__dirname + '/node_modules', __dirname + '/app']
  },
  resolveLoader: ... // 你原来未写完的代码可以继续补充完整
};

额外补充说明 #

• 可以运行npm list webpack命令确认当前Webpack版本，只要是4.x及以上，就必须使用rules而非loaders
• rules的配置逻辑和旧的loaders完全一致，只是属性名变更，不需要调整其他配置项的内容

内容的提问来源于stack exchange，提问作者affeto