Webpack Loaders

这篇博客主要介绍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"
                }]
            }
        ]
    }
}