六、webpack-图片文件的处理

先来中文网链接url-loader

安装
npm install --save-dev url-loader

配置：
#1.当图片小于limint时的配置，但是当图片大于limit时打包会报错
所以还需要进一步配置
-------2、------注释

const path = require('path')
module.exports = {
    entry: './src/min.js',   //入口
    output: {
        path: path.resolve(__dirname, 'dist'),//动态获取路径
        filename: 'bundle.js'
    },   //出口
    module: {   //配置loader
        rules: [    //规则
            {
                test: /\.css$/, 
                // webpack的读取顺序，从右向左依次执行
                // css-loader只负责将css文件进行加载
                // style-loader则负责将样式进行挂载到DOM元素上
                use: ['style-loader','css-loader']
            },
            // 官网的直接复制粘贴
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings  3.在将css挂载到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS  2.在将css模块引入
                }, {
                    loader: "less-loader" // compiles Less to CSS  1.先将less转css
                }]
            },
            // 官网的直接复制粘贴
            //------2、------
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        // 当加载图片小于limit时，会将图片编译成base64字符串形式
                      limit: 13000
                    }
                  }
                ]
              }
        ]
    }
}

#2.当图片大于limit
报错如图：当图片小于limit就用url-loader，当图片大于limit就需要file-loader这个模块，直接npm install --save-dev file-loader下载就好，不需要配置

打包完成后，虽然没有报错，但是背景依然显示不出来

因为index.html暂时没有进行打包配置还在原路径webpack打包后，图片的名字发生了变化，并且打包后图片的路径也发生了变化
解决：
在output中添加配置路径
如：----1、-----注释
等以后index.html文件也配置了打包，就需要这个路径了

const path = require('path')
module.exports = {
    entry: './src/min.js',   //入口
    output: {
        path: path.resolve(__dirname, 'dist'),//动态获取路径
        filename: 'bundle.js',
        publicPath:'dist/' //----1、-----打包后会在任何url上面拼接上dist/路径
    },   //出口
    module: {   //配置loader
        rules: [    //规则
            {
                test: /\.css$/, 
                // webpack的读取顺序，从右向左依次执行
                // css-loader只负责将css文件进行加载
                // style-loader则负责将样式进行挂载到DOM元素上
                use: ['style-loader','css-loader']
            },
            // 官网的直接复制粘贴
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings  3.在将css挂载到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS  2.在将css模块引入
                }, {
                    loader: "less-loader" // compiles Less to CSS  1.先将less转css
                }]
            },
            // 官网的直接复制粘贴
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        // 当加载图片小于limit时，会将图片编译成base64字符串形式
                      limit: 13000
                    }
                  }
                ]
              }
        ]
    }
}

效果图：

二、打包后图片路径和名字的设置

#1.打包后，webpack为了防止名字冲突，使用了32位hash值进行命名，但是不方便开发查看文件，同时文件全部在dist目录，导致文件杂乱
解决方法：------3、-------注释

// 官网的直接复制粘贴
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        // 当加载图片小于limit时，会将图片编译成base64字符串形式
                      limit: 13000,
                    //   ------3、------
                    // img(文件夹)
                    // [name](文件的原名称)
                    // .[[hash:8](截取8位hash)
                    // .[ext](文件原格式)
                    name:'img/[name].[hash:8].[ext]'
                    }
                  }
                ]
              }