我正在使用webpack 3.7.1，我很困惑。当我运行npm dist时，我在dist文件夹中得到一个index.html和一个app.css文件。多数民众赞成。
现在，如果在本地浏览器上打开index.html，我可以看到app.css上的所有样式都应用于索引。但我无法理解的是，如果在index.html上清楚地应用这些样式，文件app.css根本没有链接，但链接的是它的哈希命名版本（例如app.css？a8ade0dbcb0f4985edc3）。
我想也许这些样式是从内存或其他东西提供的，所以我将整个dist文件夹上传到我的服务器。因为dist文件夹上没有app.css？a8ade0dbcb0f4985edc3文件。这样就告诉我不应该应用样式，因为不存在具有该名称的文件。但是当我访问不同计算机和浏览器上的网站时，app.css中的样式正在被反映出来，即使这个文件没有链接到index.html文件的HTML上。 （链接的是散列命名版本）。
那么地球上有什么可能呢？我已经在我的项目中搜索了字符串？a8ade0dbcb0f4985edc3（在dist文件夹中），但它不是在index.html文件中的任何地方。
有人可以向我解释这里发生了什么。
dist文件夹和服务器上的文件是：
app.a8ade0dbcb0f4985edc3.bundle.js
app.css
contact.a8ade0dbcb0f4985edc3.bundle.js
contact.html
contact.html
这是index.html的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href="app.css?a8ade0dbcb0f4985edc3" rel="stylesheet"></head>
<body>
<h1>beautiful day</h1> <img src="img/webpack-22.ext" alt="Webpack Logo">
<script type="text/javascript" src="app.a8ade0dbcb0f4985edc3.bundle.js?a8ade0dbcb0f4985edc3"></script>
</body>
这是我的webpack配置的内容：
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
//Checking if prod or dev mode
const isProd = process.argv.indexOf('-p') !== -1; //this returns true or false
//if dev mode then we create the css of our app inline
const cssDev = ['style-loader','css-loader','sass-loader'];
//production config for our css
const cssProd = ExtractTextPlugin.extract( [
// {loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'sass-loader'}
]);
//if this variable is true we use cssProd otherwise we use cssDev
const cssConfig = isProd ? cssProd : cssDev;
module.exports = {
entry: {
app: './src/app.js',
contact: './src/contact.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
// filename: 'app.bundle.js' // just one output file
filename: '[name].[hash].bundle.js' //multiple output files
},
module: {
rules: [
//THIS IS THE FIRST RULE
{ test: /\.scss$/,
// since this is an array of loaders we use use instead of loadernpm install babel-preset-env --save-dev
use: cssConfig //this will return either the content of cssDev ir cssProd
},
//THIS IS THE SECOND RULE
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.(jpg|png|svg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].ext',
outputPath: 'img/',
// publicPath: 'img/' //not needed cause We specify public path once in the output
// section and it applies to the whole project.
}
}
}
]
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8080,
open: true
},
plugins: [
new HtmlWebpackPlugin(
{
minify: {collapseWhitespace:false},
hash: true,
excludeChunks: ['contact'],
template: './src/index.html'
}),
new HtmlWebpackPlugin(
{
minify: {collapseWhitespace:false},
hash: true,
chunks: ['contact'],
template: './src/contact.html',
filename:'contact.html'
}),
new ExtractTextPlugin({
filename: 'app.css',
disable: !isProd,
allChunks: true
})
]
};
我在随机的谷歌搜索中找到了这个，所以我想可能会回答。
URL中的问号表示查询参数。例如。在URL https://example.com/users?filter=male中，无论你在?之后写什么，请求都是关于资源https://example.com/users。
像webpack这样的框架使用缓存清除技术，它将无值的查询参数（例如?a8ade0dbcb0f4985edc3）附加到URL。此参数随每次构建而变化，并强制浏览器发送新请求并获取该资源的最新版本。在您的情况下，它只是最终提供最新版本的app.css。