webpack官网
1.loaders
var path = require('path');
module:{
loaders:[
{
test:/\.js$/, //匹配条件,json文件
loader: 'babbel',//转换页面中的es6代码
include: path.resolve(__dirname, ' '),
query:{
presets: ['latest'] //添加参数
}
}
]
},
test的参数可以是正则表达式、字符串包含绝对路径、数组
2处理项目中的CSS
安装:npm i style-loader css-loader --save-dev
css后处理器,自动给css文件加上浏览器前缀
npm i postcss-loade --save-dev
npm i autoprefixer --save-dev
require是CommonJS语法
webpack.config.js在module的loader下
{
test:/\.css$/, //匹配条件,json文件
loader: 'style-loader!css-laoder?importLoaders=1postcss-loader',//转换页面中的es6代码
}
process:[
require('autoprefixer')({
broswersL: ['last 5 versions']
})
}
?importLaoders = 1设置cssloader后指定几个数量的loader处理import进来的css文件
3.处理less和saaa
安装:npm i less-loader --save-dev
npm i less --save-dev
在module下的loader添加属性,loader的处理方式是从右到左postcss放在css和less之间
{
test:/\.less$/, //匹配条件
loader: 'style!css!postcss!less'
}
4.处理项目中的模板文件
html、dom、jsx、ejs、tpl 等
扫描二维码关注公众号,回复:
3211386 查看本文章
npm i html-loader --save-dev
5.处理图片及其他文件
npm i file-loader --save-dev
引用绝对路径图片
{
test:/\.(png|jpg|gif|svg)$/i, //匹配条件
loader: 'file-loader'
query: {
name: 'assets/[name]-[hash:5]. [ext]'//指定路径
}
}
引用相对路径的图片
${ require('相对路径') }
image-loader等
url-loader: 像file loader,如果文件小于限制大小 能够返回Data Url,否则交给file loader,图片通过base64进行编码放入html代码中