本文共 3134 字，大约阅读时间需要 10 分钟。

webpack只认识js文件和JSON文件，所以打包的时候默认是会对这两种类型的文件进行打包。但实际的项目中，除了js和JSON，还有css， img等文件。

下面我们要认识的是：

图片打包

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

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

在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文件，

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')    }}

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

npm install file-loader --save-dev

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

npm run dev

这是打包完成目录及效果, 这个时候img被单独打包成一个文件：

现在我们改下配置：

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的字符串：

转载地址：http://gizsi.baihongyu.com/