webpack处理url资源的配置

1.安装 npm i url-loader -D

2.修改webpack.config.js

const path = require('path');
// 启用热更新的 第2步
const webpack = require('webpack')
//导入html插件
//只要是插件,都一定要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件output: { // 输出文件相关的配置path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去filename: 'bundle.js' // 这是指定 输出的文件的名称},//配置dev-server第二种形式devServer: {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']},{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则// 规则 limit给定的是图片的大小 如果我们给定图片的大小大于等于我们给定的limit 则不会被转为base64编码//反之会被转换name=[hash:8]-[name].[ext] 前面加hash值区分图片 名字原样输出{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]' } // 配置图片路径loader]}}

3.index.css

.box{width: 200px;height: 120px;/*默认情况下,无法处理url地址,无论是图片还是字体库*/background:url("../images/beijing.jpg");background-size:cover ;
}