loaders是webpack的核心组成部分之一，它允许种类型的文件被引入和打包。

一、css-loader和style-loader

css-loader类似于require或者@import的使用，它的作用是将CSS文件引入到对应的入口文件里，而style-loader则是创造一个style标签，将引入的css放置进去。所以，在使用它们的时候是有先后顺序的，先css-loader再style-loader。

rules:{
  test:/\.css$/,
  use:[
    { loader:'style-loader' },
    { loader:'css-loader' }
  ]
}

注意： 先使用的loader要写在后面，次序不能混淆。

二、代码压缩

webpack自身集成了代码压缩插件uglifyjs-webpack-plugin，使用如下：

const uglify = require('uglifyjs-webpack-plugin')

//
new uglify()

三、使用html-webpack-plugin来生成html模板文件

html-webpack-plugin可以根据指定的源模板文件来生成编译后的html文件，同时还可以加入hash等解决缓存的问题。

npm install html-webpack-plugin --save-dev   //安装

// 在webpack.config.js里使用
const HtmlWebpackPlugin = require('html-webpack-plugin')

//code

plugins:[
  new HtmlWebpackPlugin({
     minify:{
       removeAttributeQuotes:true        //去掉双引号
     }, 
     hash:true,                            //加入哈希来禁止缓存
     template:'./src/index.html',           //  源模板
     filename:'assets/admin.html'         // 编译后的文件及路径 
  })
]

注意：关于更多html-webpack-plugin的使用可以参见这篇文章，这个插件比想象中要有用