wepack使用url-loader/file-loader出现的路径问题

最新推荐文章于 2023-03-09 17:22:23 发布

syx_12

最新推荐文章于 2023-03-09 17:22:23 发布

阅读量387

点赞数

分类专栏： Vue学习文章标签： vue webpack node.js

本文链接：https://blog.csdn.net/syx_12/article/details/116117423

版权

Vue学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在使用url-loader和file-loader的时候，我的图片路径总是不正确，默认路径加载到了项目路径的src下了。

我的webpackk.config.js配置如下：

<script>
const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        //正则表达式^表示开始 \.对应正正的.css
        test: /\.css$/,
        //css-loader 只负责将css文件进行加载,不负责解析和生效
        //style-loader 负责将样式添加到dom中
        //为啥不是css在前面呢？？
        //使用多个loader，是从右向左读。
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [{
          loader: 'style-loader' // creates style nodes from JS strings
        }, {
          loader: 'css-loader' // translates CSS into CommonJS
        }, {
          loader: 'less-loader' //  将 Less 编译为 CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            // loader: 'file-loader',
            options: {
              //小于这个大小，会编译base64字符串形式的图片
              //当要加载的图片小于limit时，需要使用file-loader模块进行加载
              limit: 8192,//36kb*1024最大
              name: 'img/[name].[hash:8].[ext]',
              // outputPath
            },
          },
        ]
      },

    ],
  },
}
<script>

less文件如下:

<style>
@fontSize: 18px;
@fontColor: green;
.demo1{
  font-size: @fontSize;
  color: @fontColor;
}
body{
  font-size: @fontSize;
  background-image: url('../img/bg6.jpg');
}
</style>

index.html文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="demo1">
    <p>234是多少</p>
  </div>
  <div class="demo2">

  </div>
  <script src="./dist/bundle.js"></script>
</body>


</html>

就像上面出现的，怎么src下面有dist路径呢。

项目文件如下：

找了很久的问题，才发现我的Index.html在src文件夹下面，因为Index在src路径下，所以默认的运行路径就在src下面，导致了我的图片路径报错。

解决：

将index文件不要放在任何文件夹下面。

syx_12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wepack使用url-loader/file-loader出现的路径问题

在使用url-loader和file-loader的时候，我的图片路径总是不正确，默认路径加载到了项目路径的src下了。我的webpackk.config.js配置如下：<script>const path = require('path');module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bund
复制链接

扫一扫