javascript - 任何人都可以帮助我进行 webpack 配置吗?
问题描述
我正在尝试为我的项目配置 webpack(我正在通过 youtube https://www.youtube.com/watch?v=mnS_1lolc44上的 colt steele webpack 课程)。但是我无法正确配置我的图像,我尝试了所有方法并在互联网上到处查看,但无法弄清楚如何解决。下面是我的目录结构和代码片段。
我有三个 webpack 配置文件:webpack.common.js、webpack.dev.js 和 webpack.prod.js
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index.js",
plugins : [new HtmlWebpackPlugin({
template: "./src/template.html"
})],
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader","css-loader","sass-loader"]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
publicPath: '/',
outputPath: 'img',
esModule: false
}
}
]
},
{
test: /\.html$/,
use: ["html-loader"]
}
]
}
}
webpack.dev.js
const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');
module.exports = merge(common, {
mode: "development",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
}
})
webpack.prod.js
const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');
module.exports = merge(common, {
mode: "production",
output: {
filename: "main.[contenthash].js",
path: path.resolve(__dirname, "dist")
}
})
我的 src 目录结构如下:
我正在通过src/index.js文件导入我所有的 sass 和其他 js 文件,如下所示:
我将 src/template.html 文件中的图像称为
所有图像都存在于 src/img 文件夹中,并且 template.html 文件通过路径将图像调用为“./img/”。
当我运行 npm build 命令时,我将 dist 文件夹创建为:
在这里,让我感到困惑的一件事是为什么图像会生成两次。一个在 dist/img 文件夹中,具有正确的名称 + 哈希值 + 扩展名,一个在 dist 文件夹中。此外,我生成的 index.html 文件正在调用 dist 文件夹中的图像(这是不正确的,为什么会生成我不确定)而不是调用 dist/img 文件夹中的图像?
上面的截图是生成的 dist/index.html 文件。这里,图像路径是针对 dist 文件夹中生成的图像,它不是正确的。
即使我尝试在 VS 代码中打开这些生成的图像(存在于 dist 文件夹中),我也会收到错误消息“加载图像时发生错误”。虽然图像存在于 dist/img 文件夹中,但在选择任何一个时都会显示正确的图像。
任何人都可以在这里帮助我理解,为什么 webpack 会生成两组图像(一组正确,另一组不正确)以及为什么生成的 dist/index.html 文件正在寻找不正确图像的路径而不是正确的图像。
GitHub 仓库:git@github.com:Guru4741/Sedna.git
谢谢
解决方案
您正在使用 webpack 5,并且有很大的变化。您在代码中有很多错误,但您自己会发现它;)还有一句话。这个“node_modules”不提交给 github :)
好的,让我们来看看为什么图片没有出现。删除“file-loader”库,然后删除这部分代码:
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [{
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
publicPath: '/',
outputPath: 'img',
esModule: false
}
}]
},
替换为:
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource',
generator: {
filename: 'img/[name][ext]',
},
}
您可以了解有关资产的更多信息,请访问此页面资产模块
还有一件事,你正在看的课程是相当老的 2019 年,基础知识到处都是一样的,但是新的 webpack 5 有很多变化。
推荐阅读
- android - 重量在哪里(在喷气背包中)?
- python - 从字典创建列表理解
- android - java.lang.IllegalStateException onSaveInstanceState 后无法执行此操作
- javascript - 难以理解函数中的调用堆栈
- python - 有没有比覆盖我的父 Python 类的每个方法更好的方法?
- firebase - firebase auth => auth/captcha-check-failed 和“找不到主机名匹配”错误
- html - 如何更改导航元素的填充?
- ios - XCode 构建中 react-native-config 的 PhaseScriptExecution 失败
- python - 值错误“”使用序列设置数组元素”,组套索参数
- ssl - Apollo federation PUSH 命令跳过 SSLValidation