这种行为从何而来？为什么？
http://localhost:8080/client/scripts/app.24784a3c45a8fe3a7051.bundle.js?24784a3c45a8fe3a7051
我的 bundle 和 main css 文件都发生了这种情况。
我指的是这部分，在 webpack (v4) 完成它的事情之后，为什么要附加那个
?24784a3c45a8fe3a7051这是我的运行方式：
"prod": "NODE_ENV=production webpack --mode=production && yarn start",
"start": "node dist/server.js"
所以从命令行：
yarn prodindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Title</title>
<meta charset="utf-8">
<link 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>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.html（由webpack运行后生成）：
<!doctype html><html lang="en"><head><title>My Title</title><meta charset="utf-8"><link 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><link href="../client/lib/assets/css/main.5ea170bff2113561a355.css?5ea170bff2113561a355" rel="stylesheet"></head><body><div id="app"></div><script src="../client/scripts/app.5ea170bff2113561a355.bundle.js?5ea170bff2113561a355"></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: './client/index.html',
hash: true,
});
};
const copyAllOtherDistFiles = () => {
return new CopyPlugin({
patterns: [
{ from: 'src/client/assets', to: 'client/assets' },
{ from: 'src/server.js', to: './' },
{ from: 'src/api.js', to: './' },
{ from: 'package.json', to: './' },
{ from: 'ext', to: 'client/lib' },
{ from: 'feed.xml', to: 'client' },
{
from: 'src/shared',
to: './shared',
globOptions: {
ignore: ['**/*supressed.json'],
},
},
],
});
};
module.exports = {
entry: './src/client/index.js',
output: {
filename: 'client/scripts/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
? 'client/lib/assets/css/main.[hash].css'
: 'main.css',
}),
html(),
copyAllOtherDistFiles(),
]
: [new CleanWebpackPlugin(), html(), copyAllOtherDistFiles()],
};
hash：true，会将查询参数添加到您的包中
webpack 添加 QueryString 的原因是为了避免更改不可见。大多数浏览器对 css/js 文件都有硬缓存。使用 QueryString，浏览器将获取最新文件，而不是获取缓存文件。
对于生产如此特殊，这是为 css/js 文件提供查询字符串的一个很好的理由。
如果生成捆绑包，查询字符串将被更新，这是避免现有用户无法看到更改的一种方法。