[英]HTML-Loader is not working with Webpack 4 (appropriate loader)
我只是想加载一个 HTML 文件,这样我就可以将它用作 react 的一个组件。 我已经在 webpack.config.js 中尝试了各种配置,我已经尝试重新安装 html-loader,我已经查看了我能找到的每个教程/错误帖子,但都没有解决我的问题。
webpack.config.js
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
},
包.json
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"classnames": "^2.2.6",
"css-loader": "^2.1.0",
"html-loader": "^0.5.5",
"style-loader": "^0.23.1",
"webpack": "^4.19.1",
"webpack-cli": "^3.2.1"
},
"babel": {
"presets": [
"@babel/env",
"@babel/react"
]
}
索引.jsx
import test from './test.html'
错误
./src/test.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <h1>Hello, world!</h1>
你的 webpack.config.js 一定是这样的
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: [path.resolve(__dirname, './index.js')],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
},
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react']
}
},
resolve: { extensions: [".js", ".jsx"] }
}
]
}
}
包.json
{
"name": "wb",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"build": "webpack --config ./webpack.config.js --mode development "
},
"author": "",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"classnames": "^2.2.6",
"css-loader": "^2.1.0",
"html-loader": "^0.5.5",
"style-loader": "^0.23.1",
"webpack": "^4.19.1",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
tm.html
<h1>hi test </h1>
<p>test test</p>
索引.js
import tm from './tm.html'
document.write(tm)
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>
<script src="dist/app.bundle.js"></script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.