webpack图片打包(2)

webpack只认识js文件和JSON文件，所以打包的时候默认是会对这两种类型的文件进行打包。但实际的项目中，除了js和JSON，还有css， img等文件。
这些文件就需要依赖loader来进行编译然后才能被浏览器识别并渲染出来。loader就是文件打包的一种解决方案。

下面我们要认识的是：

图片打包

先来说图片打包，现在看下目录结构，新建images文件夹，随便下载一张图片放进去：

webpackdemo
|- dist
|- node-modules
|- src
+    |- images
+        |- 1.jpg
|- index.html
|- index.js
|- package.json
|- package-lock.json

在index.js文件中添加如下内容，目的是将图片引入进来
index.js

+import yimg from "./images/1.jpg"   //先将js引入进来
window.onload = function(){
	
	var dom = document.createElement('div');
	var root = document.getElementById('root');
	dom.innerHTML = '这是我的测试博客';
	
+	var image = new Image();    //创建img标签
+	image.src = yimg;           // 将img的src属性设置成我们引入的图片

	root.appendChild(dom);
+	root.append(image);
}

由于webpack默认不认识以jpg/png 这些后缀名结尾的文件，所以要在webpack.config.js中配置loader。修改webpack.config.js文件，
这里处理图片文件用file-loader。

webpack.config.js

var path = require('path');

module.exports = {
    mode: "development",
    entry: {
        main: './src/index.js',
    },
+    module: {      //是配置我们的模块规则
+       rules: [{    //rules里面可以配置各种文件处理的规则
+           test: /\.jpg|png|jpeg|gif$/,     //匹配以jpg|png|jpeg|gif结尾的文件
+           use: [{             //使用的loader
+                   loader: 'file-loader',    //这里用file-loader来处理图片
+                   options: {                //options里面可以配置详细的处理信息
+                       name: '[name].[ext]?[hash]',     //  打包文件名
+                       publicPath: './dist/img',        //  打包的公共路径(ps:默认是在output.path下面)
+                       outputPath: 'img',               //  打包的文件放在img文件夹内。比如默认打包出来是在 dist/1.img。设置outpurpath就是dist/img/1.jpg
+                   }
+               },
+           ]
+       }]
+    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

fle-loader配置完成后，我们需要安装file-loader, npm install file-loader --save-dev 或者 npm install file-loader -D 都可以：

npm install file-loader --save-dev

安装完成之后，就可以在命令行输入我们之前配置好的命令：

npm run dev

这是打包完成目录及效果, 这个时候img被单独打包成一个文件：
file-loader 打包的图片会被直接img引用，页面渲染的时候会发送请求。如果图片很小。页面中又有很多的时候时候，是很浪费下载通道的。
这个时候我们可以用url-loader。
url-loader: url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

现在我们改下配置：
webpack.config.js

var path = require('path');

module.exports = {
    mode: "development",
    entry: {
        main: './src/index.js',
    },
    module: {      //是配置我们的模块规则
       rules: [{    //rules里面可以配置各种文件处理的规则
           test: /\.jpg|png|jpeg|gif$/,     //匹配以jpg|png|jpeg|gif结尾的文件
           use: [{             //使用的loader
+                   loader: 'url-loader',    //这里用url-loader来处理图片
                    options: {                
                        name: '[name].[ext]?[hash]',     
                        publicPath: './dist/img',        
                        outputPath: 'img',               
+                       limit: 204800,                   //  当打包的图片文件小于204800Byte时, 将图片编译成base64的形式，进行打包。如果大于204800Byte时，则使用file-loader进行打包
                    }
              },
           ]
       }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

现在我们看在使用url-loader打包的效果，我们用的图片是45830Byte。所以图片会被打包进bundle.js里，不会被单独的打包成一个文件。在页面上我们可以看到img的路径是一个base64的字符串：


图片打包常用的就file-loader 和 url-loader 了，更多的可以查文档:https://www.webpackjs.com/loaders/