Webpack 无法解析 html-loader答案

【问题标题】：Webpack can't resolve html-loaderWebpack 无法解析 html-loader
【发布时间】：2015-11-04 15:43:45
【问题描述】：

我正在将一个使用 requirejs 的项目转换为 webpack，并且遇到了“html-loader”加载程序的问题。

package.json:

"html-loader": "^0.3.0",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"

app/js/webpack.config.js:

  // folder structure:
  // root
  //   app/js
  //   bower_components/
  //   dist/
  //   node_modules/

  entry: './app/js/main.js',
  output: {
    path: 'dist/js/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      // Note, via requirejs's "text" plugin, I included templates
      // like this: var tpl = require('text!sample.html');
      // For webpack, I went through the codebase and cleaned up
      // every instance of "text!".
      {test: /\.html$/, loader: 'html'}
    ]
  },
  resolve: {
    root: ['app/js', 'bower_components'],
    alias: {
      ...
    }
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
        'bower.json', ['main']
      )
    )
  ]

当我运行 webpack -- webpack --config app/js/webpack.config.js -- 我收到以下错误消息：

app/js/some/file.js 中的错误
找不到模块：错误：无法解析 app/js/some/file.js 中的模块“html”

我尝试了以下方法，但没有成功：

  resolveLoader: {
    root: [path.join(__dirname, 'node_modules')],
  },

还尝试将“webpack.config.js”移动到项目根目录。这也没有帮助。

而且，甚至尝试使用“raw-loader”加载器，这也导致了同样的“无法解析模块 'raw'”错误。

任何帮助将不胜感激。谢谢。

【问题讨论】：

你能把你的app/js/some/file.js放在这里吗？
抱歉这个愚蠢的问题，但您确定 html-loader 和 raw-loader 已正确安装吗？也许您在执行npm install 时错过了一些错误？

标签： javascript webpack

【解决方案1】：

在更新这个时完全放弃了。

1) 我应该一直在使用text-loader，这让我可以在每个require('text!some/template.html'); 离开原地。

2) 我的根路径是not absolute。根据手册，“它必须是绝对路径！不要传递 ./app/modules 之类的东西。”

3) 如果你的requires 看起来像require('text!some/file.html')，那么你就完成了。在 webpack.config.js 中定义加载器是多余的。如果这样做，您的模板最终将看起来像module.exports="module.exports=\"...\""。

更新配置：

entry: './app/js/main.js',
output: {
    path: 'dist/js/',
    filename: 'bundle.js',
},
module: {
    loaders: [/*nothing*/]
},
resolve: {
    root: [
        path.resolve('app/js'), 
        path.resolve('bower_components')
    ],
    alias: {
        ...
    }
},
plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
            'bower.json', ['main']
        )
    )
]

【讨论】：