为了账号安全,请及时绑定邮箱和手机立即绑定

怎么回事啊?有点烦躁啊,打包能成功就是会提示错误,看着很不爽啊!

怎么回事啊?有点烦躁啊,打包能成功就是会提示错误,看着很不爽啊!

这是报错的信息:

ERROR in ./src/components/layer/layer.html

Module parse failed: D:\webpack-app\src\components\layer\layer.html

oken (1:0)

You may need an appropriate loader to handle this file type.

| <div class="layer">

|     <div> this is layer </div>

| </div>

 @ ./src/components/layer/layer.js 7:13-36

 @ ./src/app.js

下面是我的配置:

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   entry:'./src/app.js',
   output:{
       path:__dirname+'/dist',//如果想要index文件和js文件分开,可以在此只写index的路径,在filename中加上js/即可
       filename:'js/[name].bundle.js',
   },
   module: {
       rules: [
           {
               test: /\.js$/,
               use: {
                   loader: 'babel-loader',
                   options: {
                       presets: 'env'
                   }
               }
           }]
   },
   plugins:[
       new htmlWebpackPlugin({
           filename:'index.html',
           template:'index.html',
           inject:'body'
       }),
   ]
}

layer.html 文件:

<div class="layer">
   <div> this is layer </div>
</div>

layer.js:

import tpl from './layer.html';
function layer(){
   return {
       name:"layer",
       tpl:tpl
   }
}
export default layer;

layer.less:

.layer{
 width: 600px;
 height:200px;
 background-color: pink;
  > div{
   width: 400px;
   height:200px;
    background-color: yellowgreen;
 }
}

app.js:

import layer from './components/layer/layer.js';
const App = function App() {
console.log(layer);
}
new App();

package.json:

{
 "name": "webpack-app",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "babel": {
   "presets": [
     "env"
   ]
 },
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "webpack": "webpack --config webpack.config.js --progress --colors --display-modules --display-reasons "
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "babel-core": "^6.25.0",
   "babel-loader": "^7.1.1",
   "babel-preset-env": "^1.5.2",
   "babel-preset-latest": "^6.24.1",
   "html-webpack-plugin": "^2.29.0",
   "webpack": "^3.0.0"
 },
 "dependencies": {
   "css-loader": "^0.28.4",
   "sass-loader": "^6.0.6",
   "style-loader": "^0.18.2",
   "url-loader": "^0.5.9"
 }
}


正在回答

3 回答

html-webpack-plugin 是一个插件,主要用来生成html文件,You may need an appropriate loader, 你需要的是一个 loader, 插件是插件,loader是loader,它们两个不是一个东西,webpack 有四个基本的概念: entry output, loader, plugin. loader 是来解析文件,像css-loader, style-loader,  babel-loader。 plugin,只是在loader  对整个文件解析完成后,做一些其他的事性,如css js 压缩 等。 

0 回复 有任何疑惑可以回复我~

安装 npm install --save-dev html-loader

http://img1.sycdn.imooc.com//5aa8e50f000184c206360642.jpg

0 回复 有任何疑惑可以回复我~

缺少 ejs-loader 吧, 

0 回复 有任何疑惑可以回复我~
#1

不完美 提问者

提示的是module parse failed ....../layer.html 应该是html文件没有解析,但是我已经安装了html-webpack-plugin了,真不知道哪里出问题了!
2017-07-03 回复 有任何疑惑可以回复我~
#2

Y丶John4082919 回复 不完美 提问者

请问你的问题 解决了吗?我的也是报错: ERROR in ./src/components/layer/layer.html Module parse failed: D:\BaiduNetdiskDownload\code\works\webpack\src\components\layer\layer.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.
2017-07-04 回复 有任何疑惑可以回复我~
#3

不完美 提问者 回复 Y丶John4082919

恩恩,解决了,安装html-loader npm i -D html-loader 在配置文件里面加上html文件的加载器html-loader就行了,跟js一样test:/\.html$/,use:{loader:html-loader}
2017-07-04 回复 有任何疑惑可以回复我~
#4

Y丶John4082919 回复 不完美 提问者

O(∩_∩)O谢谢
2017-07-04 回复 有任何疑惑可以回复我~
#5

慕圣334673 回复 不完美 提问者

真赞!!!
2019-12-02 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消

怎么回事啊?有点烦躁啊,打包能成功就是会提示错误,看着很不爽啊!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信