Webpack编译HTML文件报错：缺少对应Loader配置

报错信息 #

ERROR in ./src/Component/logos.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html>
| <html>
| <head>

logos.html 文件内容 #

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
    <div class="container">
        <section class="customer-logos slider">
           <div class="slide"><img src='./logo1.png'></div>
           <div class="slide"><img src='./logo2.png'></div>
           <div class="slide"><img src='./logo3.png'></div>
           <div class="slide"><img src='./logo4.png'></div>
           <div class="slide"><img src='./logo5.png'></div>
           <div class="slide"><img src='./logo6.png'></div>
        </section>
     </div>
</body>
</html>

当前webpack.config.js 配置 #

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

解决方案 #

你的Webpack配置仅处理了.js/.jsx文件，未配置HTML文件的加载规则，导致无法解析logos.html，按以下步骤修复：

1. 安装html-loader
   在项目根目录执行命令：

npm install html-loader --save-dev

2. 更新webpack.config.js
   在module.loaders数组中添加HTML文件处理规则：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      // 添加HTML文件处理规则
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  }
}

额外说明：如果logos.html是项目入口模板，可配合html-webpack-plugin自动生成最终HTML文件，无需手动在代码中引入该文件；若只是作为模块引入，上述配置即可解决报错问题。

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