webpack中的file-loader,url-loader,输出路径

Question

问题

如图把大于8k的图片保存到 dist/images/xxx.png 这样的格式，并且路径正确显示

图片配置

      {
          test: /\.(png|jpg|gif|svg)$/i,
          loaders: [
              'url-loader?limit=8192&name:[name]-[hash:5].[ext]',
              'image-webpack-loader'
          ]
      }

加载的背景图

body{
  background: url("images/img1.jpg");
}
ul{
  width: 500px;
  height: 500px;
  background: url("images/img3.png");
}

img1为小于8k的图片，正常显示

img3为大于8k的图片，不显示，因为路径变了

文件目录

Answer 1

大于你的limit的文件的限制会走file-loader
你配置下你的file-loader，例如

    {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: 'file/[name].[ext]?[hash]'
        }
      },

文件引用相对地址，例如background: url('../../assets/images/tian.png');
打包后的这些图片就在dist／file／下面了
你不妨试试

Answer 2

大于limit的图片url-loader就是保持默认的加载路径，图片加载不到尝试去看看你本地开发服务器的静态资源伺服路径是哪里？一般的项目都会是以assets开头的文件夹。

Answer 3

loader: 'url-loader?limit=8192&name=img/[name].[ext]'

Answer 4

打包后的dist文件夹没有images

Answer 5

我认为你的需求其实和 webpack 关系不大。这个应该是 web 框架的 静态文件映射。
我之前用的 Express 配置如下：

const express = require('express');
const app = new express();
app.use('/static', express.static('static'));