我的 webpack.config.js
文件
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
index: './src/js/index.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
},
{
test: /\.(jpg|png)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
output: {
path: path.resolve(__dirname, './dist'),
filename: './js/[name].bundle.js',
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, './src/index.html'),
filename: 'index.html',
chunks: ['index'],
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: './css/[name].css',
}),
new CopyWebpackPlugin({
patterns: [{ from: './src/assets', to: './assets' }],
}),
],
devtool: 'source-map',
mode: 'development',
};
我出现问题的文件结构:奇怪的是,当我运行
npm run build
在 terminal
,所有目录都正确加载我的意思是:background-image
工作,和slider
加载了带有图像的目录,但还加载了一些带有随机数字名称的附加文件还有那三个额外的
.png
文件已加载到我的 index.html
如img1.png
img2.png
和 img3.png
在我的网站上不起作用的文件,他们只是不想加载
最佳答案
我认为您的图像文件可能是双重处理的,因为您曾经只是将 assets 文件夹复制到 dist 输出文件夹,然后您可能在某处使用带有 url("./someImage")
的图像或类似的 css 文件,由 css 加载器或 css Mini Exctract 插件处理,创建神秘的图像 Assets 输出,然后在您的 html 文件中使用,请查看此处:webpack.js.org/guides/asset -management/#loading-images ..我不知道你为什么需要复制你的 Assets 文件夹,但这对我来说似乎是多余的......
编辑 :我不是这方面的专家,但是在对这个奇怪的错误进行了几个小时的调查后,我意识到图像文件的路径设置正确,但是文件加载器或其他加载器使用图像生成的图像输出(比如0f9b8be78d378ad2ef78.jpg) 似乎有些不同,如果我在标准文本/二进制编辑器的 vscode 编辑器中打开它们,我会得到以下行:export default __webpack_public_path__ + "someimage.jpg";
,使用 url-loader 其二进制64转换字符串与 data-url(..).. 所以它似乎不是为了在静态 html 文件中使用它..
然后我在 webpack.config.js 中使用了推荐的方法来做到这一点:
{ test: /\.(jpg|png)$/,
type: 'asset/resource', }
之后我的图像正确显示,我不知道文件加载器等在做什么..这是我最终的 webpack.config.js:
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: {
index: './src/js/index.js',
},
devServer: {
port: 5757,
contentBase: path.resolve(__dirname, 'src'),
publicPath: '/src',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
},
{
test: /\.(jpg|png)$/,
type: 'asset/resource',
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
output: {
path: path.resolve(__dirname, './build'),
//publicPath: './assets/images',
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, './src/index.html'),
filename: 'index.html',
inject: 'body',
}),
new MiniCssExtractPlugin({
filename: './css/[name].css',
}),
],
devtool: 'source-map',
mode: 'development',
}
关于javascript - Webpack 将错误的图像加载到 dist 目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67186653/