loaders是webpack的核心組成部分之一，它允許種類型的文件被引入和打包栈顷。
一、css-loader和style-loader
css-loader類似于require或者@import的使用嵌巷，它的作用是將CSS文件引入到對(duì)應(yīng)的入口文件里妨蛹，而style-loader則是創(chuàng)造一個(gè)style標(biāo)簽，將引入的css放置進(jìn)去晴竞。所以蛙卤，在使用它們的時(shí)候是有先后順序的，先css-loader再style-loader噩死。
rules:{
test:/\.css$/,
use:[
{ loader:'style-loader' },
{ loader:'css-loader' }
]
}
注意： 先使用的loader要寫(xiě)在后面颤难，次序不能混淆。
二已维、代碼壓縮
webpack自身集成了代碼壓縮插件uglifyjs-webpack-plugin行嗤，使用如下：
const uglify = require('uglifyjs-webpack-plugin')
//
new uglify()
三、使用html-webpack-plugin來(lái)生成html模板文件
html-webpack-plugin可以根據(jù)指定的源模板文件來(lái)生成編譯后的html文件垛耳，同時(shí)還可以加入hash等解決緩存的問(wèn)題栅屏。
npm install html-webpack-plugin --save-dev //安裝
// 在webpack.config.js里使用
const HtmlWebpackPlugin = require('html-webpack-plugin')
//code
plugins:[
new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes:true //去掉雙引號(hào)
},
hash:true, //加入哈希來(lái)禁止緩存
template:'./src/index.html', // 源模板
filename:'assets/admin.html' // 編譯后的文件及路徑
})
]
注意：關(guān)于更多html-webpack-plugin的使用可以參見(jiàn)這篇文章飘千，這個(gè)插件比想象中要有用
