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' // 编译后的文件及路径
})
]