url-loader、 file-loader 配置图片的加载

注意：本进阶在webpack【7】的基础上进行衍生。

一、为什么要进行配置图片的加载，以下面例子为例子得到答案

• 1. 在 src 文件夹下新建 images 文件，里面放入两个图片。其中一个图片小于10k, 另外一个图片大于 10 k.如下所示：

     
     image.png

• 2. 在header.less 中把引用其中一个图片：

     
     image.png

• 3. 这时候执行打包脚本会报错的。

     
     image.png
• 4. 因为 webapck 不能识别图片，所以这时侯我们需要用 url-loader 进行图片的配置。但是 url-loader 中的部分功能需要借助 file-loader，现在我们进行 url-loader 来 webpack 配置图片。

二、下载 url-loader，file-loader

注意：本次操作信赖上面【一 步骤】的操作

cnpm i url-loader file-loader -D

三、在 webpack.config.js 中配置图片解析

• 1. module 中配置如下如下：

// (3): 配置 图片 文件解析
{
   // 【i】表示忽视图片格式大小写 例如 .PNG
  test: /\.(jpg|png|gif)$/i,
  use: [
      {
         loader: 'url-loader',
         // 如果图片太大再转成base64, 会让图片的体积增大 30% ，得不偿失。
         options: {
             // 图片超过 10k ,就不转成 base 文件，当图片小于 10k ，就转成 base 文件。
             limit: 10 * 1024
         }
    }
  ]
}

• 2. webpack.config.js中完整配置如下：

const path = require('path');                                       // 引入path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');           // 引入自动生成 html 的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')    // 引入分享 css 的插件
// 配置webpack的配置文件，需要将配置的对象导出，给webpack使用
module.exports = {
    // 1. 打包入口，从哪个文件开始打包
    entry: './src/main.js',

    // 2. 打包的文件放在哪
    output:{
        // 打包的文件输出的目录（输出的目录必须是一个绝对路径），这里也可以写成path:path.join(_dirname, 'dist')
        path: path.join(__dirname, './dist'),
        // 打包后的文件名叫什么
        filename: 'bundle.js'
    },
    // 3. 打包的模式： production 生产模式（打包后的文件或压缩） development(开发模式，不压缩)
    mode: 'development',

    // 4. 配置module模块加载规则
    // 默认，webpack只认识JSON,javascript，不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader
    module: {
        rules: [
            // (1): 配置 .css 文件解析
            {
                // 正则： 匹配所有以 .css 结尾的文件
                test: /\.css$/,
                // 实际处理顺序：从右往左
                // css-loader: 让webpack能够识别解析 .css 文件
                // style-loader: 通过动态的创建 style 标签的方式（在打包好的bundle.js中），让解析后的 css 内容，能够作用到页面中
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            // (2): 配置 .less 文件解析
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
            // (3): 配置 图片 文件解析
            {
                // 【i】表示忽视图片格式大小写 例如 .PNG
                test: /\.(jpg|png|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        // 如果图片太大再转成base64, 会让图片的体积增大 30% ，得不偿失。
                        options: {
                            // 图片超过 10k ,就不转成 base 文件，当图片小于 10k ，就转成 base 文件。
                            limit: 10 * 1024
                        }
                    }
                ]
            }
        ]
    },
    // 5. 插件配置
    plugins: [
        // 我们要把哪个目录下的 html 进行自动生成。
        new HtmlWebpackPlugin({template: './public/index.html'}),
        // 打包并分离出来的css叫什么名字，并在dist中的路径及路径名
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ], 
}

四、执行打包脚本

npm run build

五、查看 webpack 解析 图片大小小于【10k】效果

• 1. 上面 header.less 中引入的是 01.jpg，小于10k，解析出来直接是一个base64文件。

     
     image.png

• 2. webpack解析图片大小小于【10k】，打包好的 dist 文件夹下面是没有单独的图片文件的。

     
     image.png

六、查看 webpack 解析 图片大小大于【10k】效果

• 1. 把 header.less中引入的图片为 02.jpg，这个图片是大于 10k

     
     image.png
• 2. 把 dist 中的打包好的文件全部删除，重新再执行一下打包脚本

cnpm run build

• 3. 我们看下 打包好的 dist/index.html 在浏览器中的显示，发现图片是以文件形式存在的，并没有转化成 base64.

     
     image.png

• 4. 我们再看下打包好的 dist 文件下，发现多了一个 02.jpg生成的 图片文件。

     
     image.png