前面的文章介绍了webpack的devServer以及多入口多出口文件的配置，咱们继续往下学。
在开始学习接下来的知识之前，我们先回顾一下，前文提到了webpack的简单配置方法，但是只详细说了下入口和出口文件的配置，并没有更多的去解释其他选项的配置，比如loader，plugin等。那么咱们现在就来学一下module的配置。前面说过，module的主要作用就是通过loaders来配置，解析，转换不同类型的模块。比如说，可以把less,sass转换成css，可以把es6甚至es7语法转换成大部分浏览器可以运行的js代码。所有的loaders都需要在npm中单独安装并且在module中配置后才可以使用。loader的主要配置只有test和use两种，简单来说就是。你要匹配的文件是什么，用test来过滤。用use来确定你要用什么loader来转换你匹配到的文件。下面咱们开始第一个loader的使用。
首先我们来安装两个loader,css-loader和style-loader。运行如下代码：
代码语言：javascript复制npm install style-loader css-loader --save-dev其中，style-loader主要用于将css插入到页面的style标签中等。css-loader主要用于处理css中的url()。
然后我们查看package.json中的devDependecies中多了两个配置项，也就是我们安装的css-loader和style-loader说明安装成功。
然后，我们在src文件夹下新建一个css文件夹，并且新建一个index.css文件。
此时，你的文件目录结构应该是这样的：
在文件中我们写上如下的代码。
代码语言：javascript复制body{
background:red;
}
#title{
background:orange;
color:blue;
}只是这样还不行，我们需要在src/entry.js中引入这个css文件，代码如下：
代码语言：javascript复制import idxcss from './css/index.css'最后一步，也是最重要的一步，我们在webpack.config.js中的module中配置一下我们已经安装好的loader：
代码语言：javascript复制module:{
rules: [
{
test: /.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},然后，让我们npm run build一下！打开index.html，我们发现css已经被写入了。
下面我们介绍一下loader的其他几种写法，意思都一样，你们喜欢哪个用哪个。
代码语言：javascript复制/*第一种写法*/
module:{
rules:[
{
test:/.css$/,
use:['style-loader','css-loader']
}
]
}
/*第二种写法*/
module:{
rules:[
{
test:/.css$/,
loader:['style-loader','css-loader']
}
]
}
/*第三种写法*/
module:{
rules:[
{
test:/.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
} ok,下面我们来学一下如何压缩JS，我们需要用到uglifyjs-webpack-plugin，一个压缩JS的插件，没错，插件，plugins。那么看一下我们如何使用他呢。
uglifyjs-webpack-plugin已经集成在webpack中，所以我们不用下载安装了，直接在config.js中引入：
代码语言：javascript复制const uglify = require('uglifyjs-webpack-plugin');然后在module的plugin选项下new一个uglify就可以了。
下面我们npm run build一下就打包成功了。JS压缩通常都是用在生产环境中的。下面来看看html文件是如何打包的。
先把dist目录下的index.html复制到src目录下，然后把dist目录下的文件都删除。
html文件的打包需要用到另一个插件，html-webpack-plugin。我们先安装一下吧：
代码语言：javascript复制npm install --save-dev html-webpack-plugin安装完成之后，我们需要引入这个插件，所有的插件使用都是这三步，安装（除了webpack集成的可以省去安装这一步），引入，配置。
然后，我们需要在plugins下配置一下这个插件。代码如下：
代码语言：javascript复制new htmlPlugin({
/*压缩文件，removeAttributeQuotes指去掉属性的双引号，目前你随便不用也行*/
minify:{
removeAttributeQuotes:true
},
/*加入hash值，为了避免浏览器缓存js*/
hash:true,
/*要打包的html文件的路径及名称*/
template:'./src/index.html'
})配置完成，npm run build一下会发现dist目录下已经生成了三个文件。至此我们就学会了打包css，压缩js和打包生成html文件。如果稍微细心一点你会发现，其实webpack主要的作用就在于loader和plugin，也正是如此，webpack才有了它多样化个性化的配置方法。下一篇文章，我们一起学一下如何用webpack来处理图片。
