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 ; }