webpack除了能够打包css资源文件外，其还可以打包众多的其它类型的文件。
这里为了减少重复代码的编写，所以说此处是在上一篇文章中代码的基础上所做的修改，上一篇文章的地址如下：
打包sass文件
webpack中使用sass-loader,css-loader,style-loader来处理.scss文件的打包工作。而其中的sass-loader又依赖于node-sass，所以说我们还要添加node-sass依赖。
项目结构
修改源码
site1.scss文件
在css文件夹中添加site1.scss文件，其源码如下：
$color:blue;
#v2{
border:1px solid $color;
}
main.js文件
在main.js文件文件中添加site1.scss资源文件的引入。
require('../assets/css/site1.scss');
webpack.config.js文件
在webpack.config.js文件中的loaders关键字下添加下面代码：
,{
test:/\.scss$/
,loader:'style-loader!css-loader!sass-loader'
}
package.json文件
将控制台的光标定位于项目根目录，在其中输入下述指令，将其中的依赖添加到package.json文件中。
cnpm i node-sass sass-loader css-loader style-loader --save-dev
运行结果
在控制台中输入下述指令，打开浏览器，即能访问打包后的结果。
如上图所示，第二个文本框成功的变成了蓝色，这说明我们的sass打包正确。
打包less文件
webpack打包less文件所需要的依赖包为css-loader、style-loader、less-loader，其中less为less-loader所需要的依赖包。
修改源码
site2.less文件：
在site2.less中添加如下源码，同时将所有文本框的边框宽度变为2px
@color:green;
#res{
border:2px solid @color;
}
main.js文件：
在main.js中添加源码：
require('../assets/css/site2.less');
webpack.config.js文件：
在webpack.config.js中的loaders关键字下添加源码：
,{
test:/\.less/ //打包.less文件
,loader:'style-loader!css-loader!sass-loader!less-loader'
}
package.json文件
将控制台的光标定位于项目根目录下，执行下面指令将css-loader、style-loader、less-loader以及less依赖包打入到package.json文件中。
cnpm i less less-loader style-loader css-loader --save-dev
运行结果
在控制台中执行下列命令：
cnpm i
webpack
其展示结果为：
打包url中的资源
webpack打包url网络资源所需要的依赖包为url-loader、file-loader。
修改源码
site.css源码：
在该文件中添加下述代码，同时在相应目录中添加图片文件。
#bg{
width: 200px;
height: 200px;
background-image: url("../imgs/png/e6.png");
}
index.html源码：
在该文件中添加下述代码：
<hr>
<div id="bg"></div>
package.json源码：
将控制台中的光标定位于项目根目录中，执行下述命令行指令将url-loader、file-loader添加到package.json中
npm i url-loader file-loader --save-dev
由于依赖包版本的不一致性，这导致有的版本的依赖包不能够正常运行，所以在这里更新一下完整源码：
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.1",
"file-loader": "^0.11.1",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8"
}
}
webpack.config.js源码：
在该文件的loaders关键字下添加下述代码：
,{
test:/\.(png|jpg|gif|ttf)$/ //打包url请求的资源文件
,loader:'url-loader?limit=20000' //limit表示图片的大小为40k是临界值，小于20k的图片均被
// 打包到build.js中去，此时图片的显示就会很快，这是一个优化操作。
}
运行结果
由上图可知，我们打包的url图片资源已经可以正常显示了，由于该图片资源小于20k，因而其图片资源被以base64位字节码的形式打到了build.js中，其可以加快图片在页面的展示速度。