Question

无法在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'
}

Answer 1

您尝试使用url-loader加载图像吗？

就像刚刚替换

{
  test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}

使用

{
  test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
  loader: 'url-loader',
}

无法在webpack.config.js中加载png和gif图像

1 个答案: