这篇博客主要介绍webpack中loader的使用,博客最后依然会有webpack.config.js实例,我的项目目录是这样子的
dist是打包生成的文件目录,node_modules是什么不解释了,src是源文件目录。在正式内容开始之前如何在项目中使用npm安装某个模块呢?在上一篇博客《webpack入门》中有详细介绍,这里简单提一下
npm install moudel_name --save-dev --no-optional
1.loaders的作用
通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件
2.基本参数
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置,Loaders的配置包括以下几方面:
test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
loader:loader的名称(必须)
include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
query/option:为loaders提供额外的设置选项(可选)
3.使用babel-loader转换es6代码
安装babel-loader、babel-core、babel-preset-env
在webpack.config.js中引入path模块
var path=require("path");
在webpack.config.js中配置module参数
module:{
loaders:[
{
test:/\.js/,
loader:'babel-loader',//-loader不可省略
exclude:path.resolve(__dirname,'/node_modules'),//指定需要忽略的文件
include:path.resolve(__dirname,'/src')',//指定需要处理的文件
options:{
//options即为原query参数
presets:['env']
}
}
]
}
4.处理css以及css属性兼容
安装style-loader、css-loader、要实现兼容还需安装postcss-loader、postcss-import、autoprefixer
在module中新增匹配规则
{
test:/\.css$/,
loaders:["style-loader","css-loader",{
loader:"postcss-loader",
options:{
plugins:[require('postcss-import'),require('autoprefixer')],
browser:['last 5 versions']//指定浏览器版本为最新的5个版本
}
}]
},
5.处理sass
安装node-sass、sass-loader
新增匹配规则
{
test:/\.scss$/,
loader:"style-loader!css-loader!sass-loader"
}
6.处理html模板
安装html-loader
新增匹配规则
{
test:/\.html$/,
loader:"html-loader"
}
将模板插入页面
layer.js中
import tpl from "./layer.html";
function layer(){
return {
name:"layer",
tpl:tpl
}
}
export default layer;
app.js中
import layer from './components/layer/layer.js';
const App=function(){
console.log(layer);
var dom=document.getElementById("app");
var layerTrue=new layer();
dom.innerHTML=layerTrue.tpl;
}
new App();
7.处理pug模板
安装pug-loader
新增匹配规则
{
test:/\.pug$/,
loader:"pug-loader"
}
将模板插入页面中
layer.pug
div(class="layer")
div this is pug
div #{title}
layer.js中
import pug from "./layer.pug";
function layer(){
return {
name:"layer",
pug:pug//pug是返回的函数
}
}
export default layer;
app.js中
import layer from './components/layer/layer.js';
const App=function(){
console.log(layer);
var pug=document.getElementById("pug");
var layerTrue=new layer();
pug.innerHTML=layerTrue.pug({
title:"pug title"
});//参数为模板中的变量
}
new App();
8.处理图片
用file-loader处理
安装file-loader
新增匹配规则
{
test:/.(png|jpg|gif|svg)$/i,
loader:"file-loader",
options:{
name:"image/[name].[ext]"//放到output设置的路径下的image文件夹中,文件名为原文件名,后缀亦是原文件的后缀
}
}
路径问题
在css、scss或者其他css预处理语言中以及跟目录下的index.html中,使用绝对路径还是相对路径都行,但在诸如pug、ejs写成的组件中则需要特别的处理,以pug为例
div(class="layer")
div this is pug
div #{title}
div
img(src=require("../../assets/batmana.jpg"))
用url-loader
url-loader与file-loader的区别
url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader,url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader
安装url-loader
新增匹配规则
{
test:/.(png|jpg|gif|svg)$/i,
loaders:{
loader:"url-loader",
options:{
limit:20000,
name:"image/[name].[ext]"
}
}
}
使用img-loader压缩图片
安装img-loader
新增匹配规则
{
test:/.(png|jpg|gif|svg)$/i,
loaders:[{
loader:"url-loader",
options:{
limit:20000,
name:"image/[name].[ext]"//指定处理后的文件路径、文件名以及后缀
}
},{
loader:"img-loader"
}]
}
webpack.config.js实例
var htmlWebpackPlugin=require("html-webpack-plugin");
var path=require("path");
module.exports={
entry:"./src/app.js",
output:{
path:__dirname+"/dist",
filename:"js/[name].bundel.js"
},
plugins:[
new htmlWebpackPlugin({
template:"index.html",
filename:"index.html",
inject:"body"
})
],
module:{
loaders:[
//匹配规则数组
{
test:/\.js$/,
loader:'babel-loader',//-loader不可省略
exclude:path.resolve(__dirname,'/node_modules'),//babel忽略指定目录以加快打包
include:path.resolve(__dirname,'/src'),//babel只处理指定目录
options:{
presets:['env']
}
},
{
test:/\.css$/,
loaders:["style-loader","css-loader",{
loader:"postcss-loader",
options:{
plugins:[require('postcss-import'),require('autoprefixer')],
browser:['last 5 versions']
}
}]
},
{
test:/\.scss$/,
loader:"style-loader!css-loader!sass-loader"
},
{
test:/\.html$/,
loader:"html-loader"
},
{
test:/\.pug$/,
loader:"pug-loader"
},
{
test:/.(png|jpg|gif|svg)$/i,
loaders:[{
loader:"url-loader",
options:{
limit:20000,
name:"image/[name].[ext]"//指定处理后的文件路径、文件名以及后缀
}
},{
loader:"img-loader"
}]
}
]
}
}