04_06.url-loader

1. 根目录下下载以下模块

npm i file-loader url-loader image-webpack-loader -D

2. 要操作的文件：

3. demo

• main.less

body {
  background: url(../../static/xiao.jpg);
}

• main.js

require('./less/main.less');

• webpack.config.js

// 因为webpack里面有些路径配置, 必须是绝对路径, 导入这个模块是为了调用方法计算路径
const path = require('path');  
const htmlWebapckPlugin = require('html-webpack-plugin');

// 配置文件要求我们必须导出一个配置对象
module.exports = {

    // 入口
    entry: path.resolve(__dirname, './src/main.js'),

    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, './dist'),
        // 打包后js文件名
        filename: 'bundle_[chunkhash:8].js'
    },

    //  插件配置
    plugins: [
        new htmlWebapckPlugin({
            template: './src/index.html',   // 要处理的html
            filename: 'index.html',         // 处理后的html名称
            inject: 'body',                 // 自动注入js到什么地方
            minify:{ // 压缩优化HTML页面
                collapseWhitespace:true, // 合并空白字符
                removeComments:true, // 移除注释
                removeAttributeQuotes:true // 移除属性上的引号
            }
        })
    ],

    // loader的作用是为了让webpack可以打包其他类型的模块
    module: {

        // 配置loader, 该配置选项是必须的
        rules: [    
            // 打包url文件
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use: [
                    // 默认配置全部打包进来
                    // 'url-loader'

                    // 指定小于10kb的图片才转为base64编码打包
                    {loader: 'url-loader', options: {limit: 10240}}
                ]
            }
        ]
    }
};

• 在根目录执行webpack

webpack