您的位置: 首页  >  文章  >  webpack url不同文件夹下的 同名图片，后者覆盖前者

webpack url不同文件夹下的 同名图片，后者覆盖前者

分类: 文章 • 2024-06-08 16:18:52

参考上一篇文章，在最后一片文章中会放github项目地址 

//index.scss
html,body{
    

    .box{
        width:220px;
        height:150px;
        // 默认情况下webpack无法处理css文件中的url地址，不管是图片还是字体库
        background:url('../images/1.jpg');
        background-size: cover;
    }
    .box2{
        width:220px;
        height:150px;
        // 默认情况下webpack无法处理css文件中的url地址，不管是图片还是字体库
        background:url('../images2/1.jpg');
        background-size: cover;
    }
}
//webpack.config.js
const path = require('path');
//如果热重载出问题，需要引入下面模块进行配置
//启用热更新的第二步
const webpack = require('webpack');
//导入在内存中生成 HTML 页面的插件
//只要是插件，都一定要放到 plugins 节点中去
//这个插件的两个作用：
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动把打包好的bundule.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin'); 

//这个配置文件其实就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {
  //大家已经学会了举一反4：在配置文件中，需要手动指定 入口和出口
  entry: path.join(__dirname, "./src/main.js"), //入口，表示，要使用webpack打包哪个文件
  output: {
    //输出文件相关的配置
    path: path.join(__dirname, "./dist"), //指定打包好的文件，输出到哪个目录中去
    filename: "bundle.js" //这是指定 输出的文件的名称
  },
  devServer: {
    //这是配置 dev-server 命令参数的第二种形式，相对来说这种方式麻烦一些
    //webpack-dev-server --open --port 3000 --contentBase src --hot
    open:true,//自动打开浏览器
    port:3000,//设置启动时候的运行端口
    contentBase:'src',//指定托管的根目录
    hot:true,//启用热更新
  },
  plugins:[//配置插件的节点
    new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象,这是启用热更新的第三步
    new htmlWebpackPlugin({//创建一个在内存中生成html的插件
        template:path.join(__dirname,'./src/index.html'),//指定模板页面,将来会根据指定的页面路径，去生成内存中的页面
        filename:'index.html',//指定生成的页面的名称
    }),
  ],
  module:{//这个节点，用于配置所有的第三方模块加载器
    rules:[//所有第三方模块的 匹配规则
        { test:/\.css$/,use:['style-loader','css-loader'] },//配置处理.css文件的第三方loader规则(从右到左进行调用)
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//配置处理.less文件的第三方loader规则
        { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },//配置处理.sass文件的第三方loader规则
        { test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=7631&name=[name].[ext]'] },//处理图片路径的loader
        //limit给定的值，是图片的大小，单位是byte,
        //如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，
        //如果图片小于给定的limit值，则会被转为base64格式的字符串。
        //name=[name].[ext] : 之前图片名，后缀名不变

        

    ]

  }
};


//当我们在控制台，直接输入webpack命令执行的时候，webpack做了如下几步：
//1.首先，webpack发现，我们没有通过命令的形式，给他指定入口和出口
//2.webpack就会去项目的根目录中，查找一个叫'webpack.config.js'的配置文件
//3.当找到配置文件后，webpack会去解析执行这个配置文件.当解析执行完配置文件后，就得到了配置文件中导出的配置对象
//4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建.

//使用webpack-dev-server这个工具，实现自动打包编译功能
//1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
//2.安装完毕后，这个工具的用法，和webpack命令的用法，完全一样
//3.由于我们是在项目中，本地安装的webpack-dev-server，所以无法把它当作脚本命令，在终端中直接运行，
//（只有那些 安装到全局 -g 的工具才能在终端中正常执行）
//4.注意：webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中必须安装webpack
//5.webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上；
//而是，直接托管到了电脑内存中，所以我们在项目根目录中，根本找不到，打包好的bundle.js
//6.我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，
//虽然我们看不到他，但是，可以认为，和dist src node_modules平级，有一个看不见的文件叫bundle.js
//7.

 

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 注意：这里不推荐直接在这里引用任何包和css文件。 -->
    <!-- 解决办法：在main.js中配置 -->

    <!-- mian.js中的代码涉及到了es6的新语法，但是浏览器不识别 -->
    <!-- <script src="./main.js"></script> -->
    <!-- 通过webpack这么一个前端构建工具，把main.js做了一下处理，生成了一个bundle.js文件 -->
    
    <!-- <script src="../dist/bundle.js"></script> -->


    <!-- 当使用了html-webpack-plugin之后，我们不再需要手动处理bundle.js,因为这个插件已经帮我们自动创建了一个合适的script标签，并且引用了正确的路径 -->
    <!-- <script src="/bundle.js"></script> -->

    <!-- css 或会发起二次请求，不推荐这么做 -->
    <!-- <link rel="stylesheet" href="./css/index.css"> -->

    


</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

效果图如下：

webpack url不同文件夹下的 同名图片，后者覆盖前者

 

 

 

解决办法：

图片名前缀一个八位的hash值（最多32位，这里相当于截取前八位），修改webpack.config.js

const path = require('path');
//如果热重载出问题，需要引入下面模块进行配置
//启用热更新的第二步
const webpack = require('webpack');
//导入在内存中生成 HTML 页面的插件
//只要是插件，都一定要放到 plugins 节点中去
//这个插件的两个作用：
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动把打包好的bundule.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin'); 

//这个配置文件其实就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {
  //大家已经学会了举一反4：在配置文件中，需要手动指定 入口和出口
  entry: path.join(__dirname, "./src/main.js"), //入口，表示，要使用webpack打包哪个文件
  output: {
    //输出文件相关的配置
    path: path.join(__dirname, "./dist"), //指定打包好的文件，输出到哪个目录中去
    filename: "bundle.js" //这是指定 输出的文件的名称
  },
  devServer: {
    //这是配置 dev-server 命令参数的第二种形式，相对来说这种方式麻烦一些
    //webpack-dev-server --open --port 3000 --contentBase src --hot
    open:true,//自动打开浏览器
    port:3000,//设置启动时候的运行端口
    contentBase:'src',//指定托管的根目录
    hot:true,//启用热更新
  },
  plugins:[//配置插件的节点
    new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象,这是启用热更新的第三步
    new htmlWebpackPlugin({//创建一个在内存中生成html的插件
        template:path.join(__dirname,'./src/index.html'),//指定模板页面,将来会根据指定的页面路径，去生成内存中的页面
        filename:'index.html',//指定生成的页面的名称
    }),
  ],
  module:{//这个节点，用于配置所有的第三方模块加载器
    rules:[//所有第三方模块的 匹配规则
        { test:/\.css$/,use:['style-loader','css-loader'] },//配置处理.css文件的第三方loader规则(从右到左进行调用)
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//配置处理.less文件的第三方loader规则
        { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },//配置处理.sass文件的第三方loader规则
        { test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=7631&name=[hash:8]-[name].[ext]'] },//处理图片路径的loader
        //limit给定的值，是图片的大小，单位是byte,
        //如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，
        //如果图片小于给定的limit值，则会被转为base64格式的字符串。
        //name=[name].[ext] : 之前图片名，后缀名不变

        

    ]

  }
};


//当我们在控制台，直接输入webpack命令执行的时候，webpack做了如下几步：
//1.首先，webpack发现，我们没有通过命令的形式，给他指定入口和出口
//2.webpack就会去项目的根目录中，查找一个叫'webpack.config.js'的配置文件
//3.当找到配置文件后，webpack会去解析执行这个配置文件.当解析执行完配置文件后，就得到了配置文件中导出的配置对象
//4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建.

//使用webpack-dev-server这个工具，实现自动打包编译功能
//1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
//2.安装完毕后，这个工具的用法，和webpack命令的用法，完全一样
//3.由于我们是在项目中，本地安装的webpack-dev-server，所以无法把它当作脚本命令，在终端中直接运行，
//（只有那些 安装到全局 -g 的工具才能在终端中正常执行）
//4.注意：webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中必须安装webpack
//5.webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上；
//而是，直接托管到了电脑内存中，所以我们在项目根目录中，根本找不到，打包好的bundle.js
//6.我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，
//虽然我们看不到他，但是，可以认为，和dist src node_modules平级，有一个看不见的文件叫bundle.js
//7.

效果很正确：

webpack url不同文件夹下的 同名图片，后者覆盖前者

 

 

 

 

相关推荐