我的webpack将图像转换为一组带有.eot,.ttf和.svg扩展名的奇怪文件。它还会创建一个包含一组不同国家/地区的png文件。标志,没有包含我的初始图像的png文件。我使用image-webpack-loader,url-loader和file-loader,并且已经尝试重新安装它们。这是我的webpack.config.js
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.resolve(__dirname, './public/scripts'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/',
publicPath: '/'
}
},
{
loader: 'image-webpack-loader',
options: {
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90'
},
mozjpeg: {
quality: 65
}
}
}
]
},
{
test: /\.s?css$/,
use: CSSExtract.extract({
use : [
{
loader : 'css-loader',
options : {
sourceMap : true // source map for css in development
}
},
{
loader : 'sass-loader',
options : {
sourceMap : true
}
},
{
loader: "jshint-loader"
}
]
})
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins : [
CSSExtract,
],
devtool: isProduction ? 'source-map' : 'cheap-eval-source-map', // source map for locating a bug in source files, not in the bundle
devServer: {
contentBase: path.join(__dirname, "public"),
publicPath: "/scripts/",
historyApiFallback: true // this line is for client-side routing
},
}
}
如何让webpack正确处理所有图像?