• webpack入门(四)——webpack loader 和plugin


    什么是loader

    loaders是你用在app源码上的转换元件。他们是用node.js运行的,把源文件作为参数,返回新的资源的函数。 
    例如,你可以用loaders告诉webpack加载 coffeeScript或者JSX。 
    loaders 特点: 
    1. 可以链式拼接。他们用在通向文件的管道,最后一个loader预期返回一个javascript,其它Loader可以返回任意格式给下一个loader。 
    2. loaders可以是同步的,也可以是异步的。 
    3. loaders是用node.js来跑,可以做一切可能的事情。 
    4. loaders接收query参数。这些参数会传入 loaders内部作为配置来用。 
    5. 在webpack config 中 loaders可以绑定到 扩展名/正则 。 
    6. loaders 可以用npm 发布或者安装。 
    7. 除了用package.json 的main导出的 loader外, 一般的模块也可以导出一个loader。 
    8. 装载机可以访问配置。 
    9. plugin 可以给loaders更多功能。 
    10. loader可以发出更多的任意文件。

    resoloving loaders

    loader 的resolve跟 模块很像。一个loader预期导出一个函数,而且是用兼容javascript的nodepgn 的。一般情况下,用npm管理loader,但是你也可以在自己app内有loader文件。

    引用loader

    为了方便,虽然不是必须的, loaders一般命名为xxx-loader, xxx就是loader的实义名。例如 json-loader。 
    或许你已经用全名引用了loader(例如 json-loader),如果没有你可以用它的短名(例如 json)。 
    装载机命名惯例和优先级搜索顺序由webpack 配置API中的resolveLoader.moduleTemplates 定义。 
    装载机的命名约定可能在用require 语法引用时会有用。看下面的用法。

    安装 loader

    如果 npm 上有 这个Loader,你可以像这下面这样安装

    $ nppm install xxx-loader --save
    • 1

    或者

    $ npm install xxx-loader --save-dev
    • 1

    用法

    有很多种办法在你的app中用loader: 
    1. 显示地在 require 中添加。 
    2. 在配置文件中 配置。 
    3. 在命令行配置。

    require 中用

    注意:如果你不知道你的代码在哪个环境(node.js和browser)中用尽量, 避免使用这个。 使用下一节那样的配置。

    在require语句中(或者 define, require.ensure等)你可以指定装载机。只需要用 “!”将资源和Loader分开。每一部分会相对于当前文件夹来resolve。它可能覆盖config 文件中用 “!”规定的全部loader。

    require("./loader!./dir/file.txt");
    // => uses the file "loader.js" in the current directory to transform
    //    "file.txt" in the folder "dir".
    
    require("jade!./template.jade");
    // => uses the "jade-loader" (that is installed from npm to "node_modules")
    //    to transform the file "template.jade"
    //    If configuration has some transforms bound to the file, they will still be applied.
    
    require("!style!css!less!bootstrap/less/bootstrap.less");
    // => the file "bootstrap.less" in the folder "less" in the "bootstrap"
    //    module (that is installed from github to "node_modules") is
    //    transformed by the "less-loader". The result is transformed by the
    //    "css-loader" and then by the "style-loader".
    //    If configuration has some transforms bound to the file, they will not be applied.
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    config配置

    你可以在config文件中把loader绑定到 一个正则。

    {
        module: {
            loaders: [
                { test: /.jade$/, loader: "jade" },
                // => "jade" loader is used for ".jade" files
    
                { test: /.css$/, loader: "style!css" },
                // => "style" and "css" loader is used for ".css" files
                // Alternative syntax:
                { test: /.css$/, loaders: ["style", "css"] },
            ]
        }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    命令行

    命令行中,你也可以把Loader绑定到扩展名上。

    $ webpack --module-bind jade --module-bind 'css=style!css'
    • 1

    上面的意思是用jade文件 用“jade-loader”加载,css文件用 “style-loader”和“css-loader”加载。

    参数

    loader可以传入query字符作为参数(像浏览器中那样),query字符串跟在 Loader后面。例如 url-loader?mimetype=image/png。 
    注意:查询字符串的格式是由加载程序决定。请去具体的loader文档中查看。许多加载机可以接收正常的query字符串(例如 ?key=value&key2=value2) 
    ,也可以接收JSON对象(?{“key”:”value”,”key1”:”value1”})。

    看以下四种写法。

    require("url-loader?mimetype=image/png!./file.png");
    • 1
    { test: /.png$/, loader: "url-loader?mimetype=image/png" }
    • 1
    {
        test: /.png$/,
        loader: "url-loader",
        query: { mimetype: "image/png" }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    webpack --module-bind "png=url-loader?mimetype=image/png"
    • 1

    使用插件

    在webpack中通常使用插件添加与 bundles相关的功能。例如 BellOnBundlerErrorPlugin 会在打包进程中给你通知错误消息。

    内置插件

    直接用配置项的plugins属性。

    // webpack should be in the node_modules directory, install if not.
    var webpack = require("webpack");
    
    module.exports = {
        plugins: [
            new webpack.ResolverPlugin([
                new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
            ], ["normal", "loader"])
        ]
    };
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    其它插件

    如果不是内置插件,在npm 上发布过的插件一般可以通过npm 安装安装,如果没有发布,你要用其它方法了

    npm install component-webpack-plugin
    • 1

    然后像像下面这样使用

    var ComponentPlugin = require("component-webpack-plugin");
    module.exports = {
        plugins: [
            new ComponentPlugin()
        ]
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    如果你用npm装第三方插件,建议用 webpack-load-plugins .它能检测所有第你安装过并且在保存在package中的三方插件,在你需要用的时候会加载进来。

    更多相关文章

    webpack入门(一)

    webpack入门(二)

    webpack入门(三)

    webpack入门(四)

    webpack入门(五)

    webpack入门(六)

    8斗5车,查看更多技术文章。

  • 相关阅读:
    百度Tera数据库介绍——类似cassandra,levelDB
    Cassandra——类似levelDB的基于p2p架构的分布式NOSQL数据库
    Greenplum——升级的分布式PostgresSQL
    Neo4j图数据库简介和底层原理
    445. Add Two Numbers II ——while s1 or s2 or carry 题目再简单也要些测试用例
    22. Generate Parentheses——本质:树,DFS求解可能的path
    LevelDb简单介绍和原理——本质:类似nedb,插入数据文件不断增长(快照),再通过删除老数据做更新
    es根据磁盘使用情况来决定是否分配shard
    ES mlockall作用——preventing that memory from being paged to the swap area
    我相信我会反击!围绕艰苦的开局迫使程序员初尝体验
  • 原文地址:https://www.cnblogs.com/ExMan/p/7056007.html
Copyright © 2020-2023  润新知