Javascript 无法加载图像网页包(4.41.0)
我试图使用Javascript 无法加载图像网页包(4.41.0),javascript,webpack,webpack-4,webpack-file-loader,Javascript,Webpack,Webpack 4,Webpack File Loader,我试图使用Webpack加载一个jpg图像文件,但我一直收到以下错误:Uncaught错误:模块构建失败(来自./node\u modules/mini css extract plugin/dist/loader.js):moduleParserError:模块解析失败:意外字符'�' (1:0) 我使用的是文件加载器,所以我不确定出了什么问题 这是我的webpack.config.js文件: module.exports = { context: __dirname, entry:
Webpack
加载一个jpg图像文件,但我一直收到以下错误:Uncaught错误:模块构建失败(来自./node\u modules/mini css extract plugin/dist/loader.js):moduleParserError:模块解析失败:意外字符'�' (1:0)
我使用的是文件加载器,所以我不确定出了什么问题
这是我的webpack.config.js
文件:
module.exports = {
context: __dirname,
entry: {
frontend: ['./src/index.js', './src/sass/style.scss'],
customizer: './src/customizer.js'
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name]-bundle.js'
},
mode: 'development',
devtool: 'cheap-eval-source-map',
module: {
rules: [
{
test: /\.(jpe?g|JPG|png|gif)\$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: 'public/images',
name: '[name].[ext]'
}
}
]
}
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
context: __dirname,
entry: {
frontend: ['./src/index.js', './src/sass/style.scss'],
customizer: './src/customizer.js'
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name]-bundle.js'
},
mode: 'development',
devtool: 'cheap-eval-source-map',
module: {
rules: [
{
enforce: 'pre',
exclude: /node_modules/,
test: /\.jsx$/,
loader: 'eslint-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'svg-defs.svg'
}
},
{
test: /\.(jpe?g|JPG|png|gif)\$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: 'public/images',
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
new StyleLintPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new BrowserSyncPlugin({
files: '**/*.php',
proxy: 'http://mysite.test/'
})
],
optimization: {
minimizer: [new UglifyJsPlugin(), new OptimizeCssAssetsPlugin()]
}
};```
我的图像当前存储在src/images
目录中。我会错过什么
谢谢你的帮助
编辑:下面是我用来拉入图像的CSS:
#header {
background: url('../images/header.JPG') no-repeat center center fixed;
background-size: cover;
}
编辑:这是我的整个webpack.config.js
文件:
module.exports = {
context: __dirname,
entry: {
frontend: ['./src/index.js', './src/sass/style.scss'],
customizer: './src/customizer.js'
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name]-bundle.js'
},
mode: 'development',
devtool: 'cheap-eval-source-map',
module: {
rules: [
{
test: /\.(jpe?g|JPG|png|gif)\$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: 'public/images',
name: '[name].[ext]'
}
}
]
}
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
context: __dirname,
entry: {
frontend: ['./src/index.js', './src/sass/style.scss'],
customizer: './src/customizer.js'
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name]-bundle.js'
},
mode: 'development',
devtool: 'cheap-eval-source-map',
module: {
rules: [
{
enforce: 'pre',
exclude: /node_modules/,
test: /\.jsx$/,
loader: 'eslint-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'svg-defs.svg'
}
},
{
test: /\.(jpe?g|JPG|png|gif)\$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: 'public/images',
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
new StyleLintPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new BrowserSyncPlugin({
files: '**/*.php',
proxy: 'http://mysite.test/'
})
],
optimization: {
minimizer: [new UglifyJsPlugin(), new OptimizeCssAssetsPlugin()]
}
};```
- 首先尝试这样替换sass正则表达式测试:
test://\(sass | scss)$/
- 如果不起作用,请尝试这样替换整个规则:
- 同时从MinicsExtractPlugin中删除
{filename:'[name].css'}
plugins:[
...
new MiniCssExtractPlugin(),
...
你的css文件存储在哪里?@AymanMorsy我实际上在使用SASS代码——它位于
src/SASS
。CSS
被编译到public
文件夹中。我相信这与文件加载器
无关,这是关于Sass错误消息引用mini CSS extract plugin
我看不出你在哪里处理它。。。请把你所有的配置代码放在这里嘿@AymanMorsy,刚刚添加了我的整个webpack.config.js
文件。我尝试了这个,但现在我得到了以下错误:Uncaught错误:模块解析失败:意外字符'�' (1:0)您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件。看见https://webpack.js.org/concepts#loaders (此二进制文件的源代码省略)
这几乎是一个打字错误'�' 你能把这个项目上传到github上看看吗