Loader Usage
- 三种方法
//方法1
require("./loader!./dir/file.txt");
require("jade!./template.jade");
require("!style!css!less!bootstrap/less/bootstrap.less");
//方法2
//在webpack.config.js 文件配置
{
module:{
loaders:[
{test:/\.jade$/,loader:"jade"},
{test:/\.css$/,loader:"style!css"},
{test:/\.jade$/,loader:["style","css"]},
]
}
}
//方法3
$ webpack --module-bind jade --module-bind 'css=style!css'
常见Loaders介绍
- 样式 css-loader sass-loader less-loader
- 脚本 babel-loader
- 图片/字体 file-loader url-loader
webpack常用的优化
- 使用别名
{
resolve:{
alias:{
moment:"moment/min/moment-with-localies.min.js"
}
}
}
require("moment")
- 忽略对已知模块的解析
{
module:{
noParse:[/moment-with-locales/]
}
}
- 将模块暴露到全局
方法1;使用expose-loader
{
module:{
loader:[{
test:/jquery\.js$/,
loader:"expose?$!expose?jQuery"
//这句话expose问号后面跟一个参数$ 然后! 是并行;然后在把jQuery导出去
}]
}
}
require("expose?$!expose?jQuery!jquery");
方法2 ; 使用ProvidePlugin
{
plugins:[
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
})
]
}
//$("#a")
- 提取公共代码
{
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:"vendor",
filename:"[name].[hash:8].js",
minChunks:3,
chunks:['jquery','underscore']
})
]
}
- 配置全局开关
{
plugins:[
new webpack.DefinePlugin({
DEGUG:true
})
]
}
//constant.js
const Constant={
API_HOST:DEGUG?"www.baidu.com":""
}
- 单独打包css 不打包成js文件
{
plugins:{
new ExtractTextPlugin("[name].[hash:8].css",{
allChunks:true
})
}
}