我将使用HtmlWebpackPlugin来生成HTML文件。
在使用webpack构建时,我遇到了一个问题:HTML文件中script标签的src与脚本文件名不同。
以下是我的webpack配置:
这是我的dist文件夹: 你可以看到bundle文件的名称是正确的,但是在body结束时的script标签的src是错误的。
在使用webpack构建时,我遇到了一个问题:HTML文件中script标签的src与脚本文件名不同。
以下是我的webpack配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: { index: path.resolve(__dirname, '../src/index.js') },
output: {
filename: 'bundle.[fullhash].js',
path: path.resolve(__dirname, '../dist/'),
},
devtool: 'source-map',
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
minify: true,
}),
],
module: {
rules: [
// HTML
{
test: /\.(html)$/,
use: ['html-loader'],
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
// CSS
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets/images/',
},
},
],
},
],
},
};
这是生成的HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Document</title>
<script
defer="defer"
src="bundle.3d5baadb547d13677f00.js?3d5baadb547d13677f00"
></script>
</head>
<body>
<script src="1ec740dc7ce75155c1fd.js"></script>
</body>
</html>
这是我的dist文件夹: 你可以看到bundle文件的名称是正确的,但是在body结束时的script标签的src是错误的。