Webpack 网页包-无法加载资产(404-未找到)
我正在处理Webpack5,正在处理一个奇怪的问题 开发服务器找不到我的资源(图片、SVG),但是js文件和css文件可以正常工作。如果我从图像文件加载器(在webpack.conf中)中删除Webpack 网页包-无法加载资产(404-未找到),webpack,webpack-dev-server,Webpack,Webpack Dev Server,我正在处理Webpack5,正在处理一个奇怪的问题 开发服务器找不到我的资源(图片、SVG),但是js文件和css文件可以正常工作。如果我从图像文件加载器(在webpack.conf中)中删除outputPath:“/assets/images”值,那么文件将存储在主文件夹中并工作 所以我的想法是资产文件夹没有传输到dev服务器 我用任何配置设置、文档等测试了大约6个小时,但它不起作用 这是我的webpack.conf const MiniCssExtractPlugin = require(
outputPath:“/assets/images”
值,那么文件将存储在主文件夹中并工作
所以我的想法是资产文件夹没有传输到dev服务器
我用任何配置设置、文档等测试了大约6个小时,但它不起作用
这是我的webpack.conf
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
module: {
rules: [
{
exclude: /(node_modules)/,
loader: 'babel-loader',
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|mp4|svg|jpe?g|gif)$/,
exclude: /fonts/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "/assets/images",
}
}
]
},
{
test: /\.(eot|woff|woff2|ttf)$/,
exclude: /assets/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "/assets/fonts",
}
}
]
},
{
test: /\.html$/i,
loader: 'html-loader',
}
]
},
resolve: {
extensions: ['*', '.js']
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: 'Project',
template: './src/index.html',
minify: false
}),
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false,
}),
new MiniCssExtractPlugin({
filename: "app.css"
})
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.js',
publicPath: ''
},
devServer: {
port: 8080,
contentBase: './dist',
publicPath: ''
},
mode: "development"
};
Package.json
{
"name": "website_webpack",
"version": "1.0.0",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@barba/core": "^2.9.7",
"@lottiefiles/lottie-player": "^0.5.1",
"gsap": "^3.5.1",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"smooth-scrollbar": "^8.5.3",
"webpack-cli": "^4.2.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-stage-3": "^7.8.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0-alpha.17",
"mini-css-extract-plugin": "^1.3.3",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"webpack": "^5.10.3",
"webpack-dev-server": "^3.11.0"
},
"directories": {
"test": "test"
},
"description": ""
}
文件夹层次结构:
如果有人能帮助我,那将是我的荣幸;)
问候,,
史蒂夫更新:
我已将文件加载器(jpg、mp4,…)值更改为:
use: 'file-loader?name=./assets/images/[name].[ext]'
现在可以工作了。更新:
我已将文件加载器(jpg、mp4,…)值更改为:
use: 'file-loader?name=./assets/images/[name].[ext]'
现在工作