一、什么是加载器(loaders)

loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载less文件、sass文件、es的js文件等

二、loaders 特性

  • loaders可以串联,他们应用于管道资源,最后的loader将返回javascript,其它的可返回任意格式(传递给下一个loader)

  • loaders 可以同步也可以异步

  • loaders在nodejs下运行并且可以做一切可能的事

  • loader接受参数,可用于配置里

  • loaders可以绑定到extension/RegExps 配置

  • loaders 可以通过npm发布和安装

  • 正常的模块儿可以到处一个loader除了

  • loaders 可以访问配置

  • 插件可以给loaders更多的特性

  • loaders可以释放任意额外的文件

三、loaders的执行顺序

loaders的执行顺序分为三部分:preLoaders - loaders - postLoaders,针对每一个阶段可以这对不同的操作,preLoaders可以进行代码的时候检查,只有检测通过才可以进行loaders。loaders阶段主要进行css、js、 images等文件的处理。postLoaders阶段没有用到过

四、css-loader和style-loader添加CSS样式

现在来添加一些样式,webpack使用loader的方式来处理各种各样的资源,比如说样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

安装我们的loader

npm install css-loader style-loader --save-dev

配置loader,在webpack.config.js中

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字  
    entry: {
        app: ['./src/js/index.js'],
        vendors: ['jquery', 'moment'] //需要打包的第三方插件  
    },
    //输出的文件名,合并以后的js会命名为bundle.js   
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    module: {
        loaders: [
            // 把之前的style loader改为     
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
                exclude: /node_modules/             }
        ]
    }
}
;

看loaders的书写方式,test里面包含一个正则,包含需要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader然后是style-loader.

我们在webpackDemo项目里面创建一个css文件夹,然后 创建 index.css文件,内容如下:

body{
    font-size: 16px;
}

然后在index.js引用 css文件

var login=require('./login');
var data = require('data');
require('./../css/index.css'); $("#welcome").html(data);

这样就能实现样式引用了。还可以结合ExtractTextPlugin进行样式提取。

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字  
    entry: {
        app: ['./src/js/index.js'],
        vendors: ['jquery', 'moment']
            //需要打包的第三方插件  
    },
    //输出的文件名,合并以后的js会命名为bundle.js    
    output: {
    path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    module: {
        loaders: [
            // 把之前的style&css&less loader改为    
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
                exclude: /node_modules/             }, {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style', 'css!less'),
                exclude: /node_modules/             },
        ]
    },
    plugins: [
        // 分离css      
        new ExtractTextPlugin('[name].bundle.css', {
            allChunks: true
        })
    ],
        externals: {
        // require('data') is external and available
        //  on the global var data     
        'data': 'data',
         devtool: 'source-map'
    }
};

五、autoprefixer-loader和less-loader处理less文件

项目中如果用到less,就需要对less进行转换,通过less-loader就能进行转换。autoprefixer-loader是针对css3的前缀进行自动 填充,例如:border-radius,autoprefixer-loader通过他就能把各个浏览器的前缀添加上去。

安装

npm install less autoprefixer-loader less-loader postcss-loader --save-dev

添加loader

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字 
    entry: {
        app: ['./src/js/index.js'],
        vendors: ['jquery', 'moment']
            //需要打包的第三方插件 
    },
    //输出的文件名,合并以后的js会命名为bundle.js    
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle_[name].js"
    },
    module: {
        loaders: [
            // 把之前的style&css&less loader改为      
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader'),
                exclude: /node_modules/             }             , {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?{browsers: ["last 2 version", "IE 8", "Android 4.0", "iOS 6"]}!less?strictMath&noIeCompat!postcss')
            }
        ]
    },
    postcss: function() {
        return [require('postcss-fixes')({ preset: 'recommended' })]
    },
    plugins: [
        // 分离css      
        new ExtractTextPlugin('[name].bundle.css', {
            allChunks: false
        })
    ],
};

在webpackDemo 添加login.less文件

.maker-config {
    width: 100px;
    background-color: red;
    border-radius: 50px;
    margin-left: -48px;
    float: right;    a{
        font-size: 16px;
        display: flex    }
}

执行webpack命令生成的css文件为:

body{font-size:16px}
.maker-config{
width:100px;
background-color:red;
border-radius:50px;
margin-left:-48px;
float:right}
.maker-config a{
font-size:16px;
display:-webkit-box;
display:-ms-flexbox;
display:flex}/*# sourceMappingURL=app.bundle.css.map*/

六、url-loader图片处理

这个和其他一样,也许你也已经会玩了。安装loader,处理文件。诸如图片,字体等等,不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的,为你减轻很多的网络请求。

安装url-loader

npm install url-loader --save-dev

配置config文件

 {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      }

注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。

我们修改一下login.less文件

.maker-config {
    background-color: red;
    border-radius: 50px;
    height:200px;
    background: url('../images/white.png');    a{
        font-size: 16px;
        display: flex    }
}

执行webpack执行命令,查看编译之后的css文件,可以看到 图片被转换为base64编码

body{font-size:16px}.maker-config{width:100px;background-color:red;border-radius:50px;height:200px;margin-left:-48px;float:right;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAADXBAMAAAB7U9mGAAAAGFBMVEXw8PDy8vL09PT29vbt7e3r6+v4+Pj7+/v9bAgbAAAOsUlEQVR42rxaS5cyNRC9VQm4rUqacVuVbsZtukHX6QZ1C+PoGsbHWv3/C8/xddTxNSLfD4ADSe6j7i0AGNe+0AU2gA5Aqh1maZ657w9cNJJPBUHCZxTYEwslk7XjwVTWulgWrnaESqXMaUZ39pF0Z8RzKGXNzBOmXDFsB)}.maker-config a{font-size:16px;display:-webkit-box;display:-ms-flexbox;display:flex}/*# sourceMappingURL=app.bundle.css.map*/

Webpack的加载器的更多相关文章

  1. webpack常用加载器和插件

    css文件加载器: style-loader,css-loader,sass-loader,less-loader //style和css加载器必须放在一起使用,且style必须放前面(style!c ...

  2. Webpack模块加载器

    一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...

  3. webpack loader加载器

    配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd c ...

  4. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  5. Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件

    Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...

  6. webpack进阶构建项目(一):1.理解webpack加载器

    1.理解webpack加载器 webpack的设计理念,所有资源都是“模块”,webpack内部实现了一套资源加载机制,这与Requirejs.Sea.js.Browserify等实现有所不同. We ...

  7. webpack.config.js====CSS相关:postcss-loader加载器,自动添加前缀

    1. 在webpack中加载css需要先安装style-loader 和 css-loader cnpm install --save-dev style-loader css-loader 2. 在 ...

  8. webpack加载器(Loaders)

    加载器(Loaders) loader 是对应用程序中资源文件进行转换.它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件. 示例 例如,你可以使用 loa ...

  9. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

随机推荐

  1. 【其他】3dmax撤销Ctrl+z不能用的解决办法

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/3dmax_ctrlz.html 如果你经常去网上下载各种模型参考学习的话,出现这个问题的概率会非常高.因为出现这个 ...

  2. 2.5 非透明PCI桥

    PCI桥规范定义了透明桥的实现规则,本篇在第2.3.1节中详细介绍了这种桥片.通过透明桥,处理器系统可以以HOST主桥为根节点,建立一颗PCI总线树,在这个树上的PCI设备共享同一个PCI总线域上的地 ...

  3. 4.1 PCIe总线的基础知识

    与PCI总线不同,PCIe总线使用端到端的连接方式,在一条PCIe链路的两端只能各连接一个设备,这两个设备互为是数据发送端和数据接收端.PCIe总线除了总线链路外,还具有多个层次,发送端发送数据时将通 ...

  4. LINUX下printf输出字体的特效

    在学习LINUX网络编程的时候我们做了一个聊天系统,当时为了界面更漂亮点,于是在百度上搜索了下关于printf()函数的用法,和大家分享下:                           给pr ...

  5. SUSE(Linux操作系统)

    suse linux 即 SUSE (Linux操作系统) . SUSE(发音为/zuz?/),发音的音频文件.SUSE Linux 原来是德国的 SuSE Linux AG公司发行维护的Linux发 ...

  6. GStreamer 简化 Linux 多媒体开发

    Streamer 是 GNOME 桌面环境下用来构建流媒体应用的开源多媒体框架(framework),其目标是要简化音/视频应用程序的开发,目前已经能够被用来处理像 MP3.Ogg.MPEG1.MPE ...

  7. Linux显示包含全部的文件系统

    Linux显示包含全部的文件系统 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ df -a 文件系统 1K-blocks 已用 可用 已用% 挂载点 /dev ...

  8. CentOS时钟同步服务器

    ①本地时钟服务器需要安装chrony服务,可以通过yum.rpm.源码包安装,chrony支持C/S模式 ②编辑本地时钟服务,使其指向提供标准时间服务器,例如:中国国家授时中心NTP服务器. 修改配置 ...

  9. Javascript设计模式(2)-单体模式

    单体模式 1. js最简单的单体模式 对象字面量:把一批有一定关联的方法和属性组织在一起 // 对象字面量 var Singleton = { attr1: true, attr2: 10, meth ...

  10. JVM GC笔记

    堆分区:所有new的对象都会存放在堆中      > 新生代(Young Generation):存放生命周期短的对象,具体还分为Eden和Survivor两个区,其中Survivor分为Fro ...