无法在 webpack.config.js 中加载 png 和 gif 图像
使用 Mocha-webpack 运行单元测试时出现此问题。
在这里,我粘贴了我的 webpack.config.js。
我该如何解决这个问题?
我也尝试过使用图像加载器来解决这个问题,它不起作用。
还有其他方法可以解决此类加载程序问题吗?
'use strict'
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
// output: {
// path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/',
// filename: 'build.js'
// },
resolve: {
extensions: ['.js', '.jsx', '.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(jpg|jpeg|gif|png|css)$/,
loader: [ 'css-loader' ]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
loader:'url-loader?limit=1024&name=images/[name].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg|png|gif)$/,
loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
},
{
test: /\.(png|jpg|svg)$/,
loader: 'file-loader',
query: {
name: './src/assets/[name]-[sha512:hash:base64:7].[ext]',
},
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
loader:['url-loader?limit=10000',
'img-loader']
},
{
test: /\.(woff(2)?|ttf|eot|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
// test specific setups
if (process.env.NODE_ENV === 'test') {
module.exports.externals = [require('webpack-node-externals')()]
module.exports.devtool = 'eval'
devtool: 'inline-cheap-module-source-map'
}