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

webpack处理url资源的配置

原文地址：https://www.cnblogs.com/charlypage/p/9941671.html