html-loader无效,HTML-Loader不适用于Webpack 4（适当的加载器）

您的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"] }

}

]

}

}

package.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

hi test

test test

index.js

import tm from './tm.html'

document.write(tm)

index.html

test