我正在尝试使用Webpack
加载jpg图像文件,但始终出现以下错误:Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleParseError: Module parse failed: Unexpected character '�' (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]'
}
}
]
}
我的图像当前存储在src/images
目录中。我可能会缺少什么?
感谢您的帮助!
编辑:这是我用来提取图像的CSS:
#header {
background: url('../images/header.JPG') no-repeat center center fixed;
background-size: cover;
}
编辑:这是我的整个webpack.config.js
文件:
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,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()]
}
};```