webpack处理url资源的配置

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