由于某种原因，我最终在index.html中输出了两个脚本到我的dist。不确定我的webpack脚本的哪一部分在做这件事。
index.html(运行webpack之前(
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ink.global.ssl.fastly.net/3.1.10/css/ink.min.css">
<script src="https://ink.global.ssl.fastly.net/3.1.10/js/ink-all.min.js"></script>
<script src="https://ink.global.ssl.fastly.net/3.1.10/js/autoload.js"></script>
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="ink-ie.min.css" type="text/css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div id="app"></div>
<script src="/scripts/app.bundle.js"></script>
</body>
</html>
index.html(由webpack生成-请注意，现在捆绑包的末尾有两个脚本。一个带有哈希，一个没有(
<!doctype html><html lang="en"><head><title>My Title</title><meta charset="utf-8"><link rel="stylesheet" href="https://ink.global.ssl.fastly.net/3.1.10/css/ink.min.css"><script src="https://ink.global.ssl.fastly.net/3.1.10/js/ink-all.min.js"></script><script src="https://ink.global.ssl.fastly.net/3.1.10/js/autoload.js"></script><!--[if lt IE 9 ]>
<link rel="stylesheet" href="ink-ie.min.css" type="text/css">
<![endif]--><link rel="stylesheet" href="/lib/css/master.css"/><link href="/lib/css/main.19f6cefd31f76cb95333.css?19f6cefd31f76cb95333" rel="stylesheet"></head><body><div id="app"></div><script src="/scripts/app.bundle.js"></script><script src="app.19f6cefd31f76cb95333.bundle.js?19f6cefd31f76cb95333"></script></body></html>
webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const html = () => {
return new HtmlWebPackPlugin({
template: './src/client/index.html',
filename: './index.html',
hash: true,
});
};
const copyAllOtherDistFiles = () => {
return new CopyPlugin({
patterns: [
{ from: 'src/client/assets', to: 'assets' },
{ from: 'src/server.js', to: './' },
{ from: 'src/api.js', to: './' },
{ from: 'package.json', to: './' },
{
from: 'src/shared',
to: './shared',
globOptions: {
ignore: ['**/*supressed.json'],
},
},
],
});
};
module.exports = {
entry: './src/client/index.js',
output: {
filename: 'app.[hash].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
writeToDisk: true,
},
target: 'web',
devtool: 'source-map',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /.less$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'less-loader',
],
},
{
test: /.css$/i,
use: [
{ loader: 'style-loader', options: { injectType: 'linkTag' } },
'css-loader',
],
},
{
test: /.(png|svg|jpg|gif)$/,
use: ['url-loader'],
},
],
},
plugins: isProduction
? [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: isProduction ? '/lib/css/main.[hash].css' : 'main.css',
}),
html(),
copyAllOtherDistFiles(),
]
: [new CleanWebpackPlugin(), html(), copyAllOtherDistFiles()],
};
解决方案
您之所以在捆绑包的末尾获得两个脚本，是因为您在模板文件中添加了一次脚本，并将其作为webpack入口文件添加了一个脚本。
在您的模板文件中：
<body>
<div id="app"></div>
<!-- You should remove the next line -->
<script src="/scripts/app.bundle.js"></script>
</body>
在您的webpack配置中：
module.exports = {
// Webpack will automatically import it in your HTML template.
entry: './src/client/index.js',
output: {
filename: 'app.[hash].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
...
我建议您删除模板文件中的脚本标记，以便保存文件哈希。
解释
如果我们看看插件的repo，在用法部分：
插件将为您生成一个HTML5文件，使用脚本标签将所有webpack捆绑包包含在主体中。只需将插件添加到您的网络包中。。。