Webpack有几个和模块化相关的loader,imports-loader,exports-loader,expose-loader,比较容易混淆。今天,我们来理一理。

imports-loaders

文档介绍的是:用于向一个模块的作用域内注入变量(Can be used to inject variables into the scope of a module.),官方的文档总是言简意赅但是不太好懂。我们来举个例子。
例子完整的代码可以点这里
jqGreen.js文件里仅一行代码

//没有模块化
$('#box').css('color','green');

index.js文件也只有一行代码

require('./jqGreen');

我们的配置文件中,是把index.js作为入口文件的。

{
entry:{
index:'./src/js/index.js'
}
}

注意,我们并没有引入jquery。所以运行的结果是$ is not defined

但是如果我们稍微修改一下jqGreen的引入方式,就能很轻松的解决这个问题。
index.js文件

require('imports?$=jquery!./jqGreen');

当然,这个能运行之前,我们要npm install imports-loader一下。上面代码,把变量$注入进模块jqGreen.js。同时,我们指定了变量$=jquery。等于是在jqGreen.js文件的最顶上,加上了var $=require('jquery')。这样,程序就不会报$ is not defined的错误了。

exports-loader

exports有导出的意思,这让我们猜测它有从模块中导出变量的功能。实际情况大致如此。我们来看个小例子。
例子的完整代码在 这里
Hello.js文件中仅有一个方法,直接绑定在全局变量window上面。

window.Hello = function(){
console.log('say hello.');
}

然后我们在index.js文件里去引用这个Hello.js:var hello = require('./Hello.js');。这样引用的结果是变量helloundefined。因为我们在Hello.js文件里没有写module.exports=window.Hello,所以index.js里我们require的结果就是undefined。这个时候,exports-loader就派上用场了。我们只用把index.js的代码稍微改动一下:var hello = require('exports?window.Hello!./Hello.js');,这个时候,代码就能正确的运行了。变量hello就是我们定义的window.hello啦。
var hello = require('exports?window.Hello!./Hello.js');这行代码,等于在Hello.js里加上一句module.exports=window.Hello,所以我们才能正确的导入。

expose-loader

把一个模块导出并付给一个全局变量。文档里给了一个例子:

require("expose?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available.

例子中的注释是说把file.js中exports出来的变量付给全局变量"libraryName"。假如file.js中有代码module.exports=1,那么require("expose?libraryName!./file.js")window.libraryName的值就为1(我们这里只讨论浏览器环境)。

webpack中imports-loader,exports-loader,expose-loader的区别的更多相关文章

  1. Webpack中hash、chunkhash和contenthash三者的区别

    在webpack中有三种的方式生成哈希值,分别为hash.chunkhash和contenthash.这三种方式有着不同的用处,或者说在webpack的不同环境中,会使用不同的方式生成哈希值.那为什么 ...

  2. webpack 中,module、chunk、bundle 的区别(待补充)

    项目 区别 module 是开发中的单个模块 chunk 中文意思是"块",是指 webpack 在进行模块依赖分析的时候,代码分割出来的代码块 bundle

  3. [转] webpack中配置Babel

    一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...

  4. webpack中使用typescript

    概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...

  5. webpack中配置Babel

    Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...

  6. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  7. 如何在webpack中使用loader

    一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...

  8. 第五十篇: webpack中的loader(一) --css-loader

    好家伙, 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后,自动打开浏览器 open:ture, //在http协议中,如果端口号是80,则可以被 ...

  9. Expose Loader & shit jquery

    Expose Loader webpack https://github.com/xgqfrms/FEIQA/issues/31#issuecomment-418255126 require(&quo ...

  10. webpack中加载CSS

    webpack强大之处在于可以将CSS当做一个资源模块进行管理和加载 基本使用: 安装webpack的加载插件style-loader和css-loader: npm install style-lo ...

随机推荐

  1. HTML5:了解Polyfills

    利用 HTML5 来搭建网站和应用可能是一项艰巨的任务.尽管现在越来越多的现代浏览器正在更多的支持Html5新特性,但实际上只有很少部分人能够幸运的只需要为这些最新的浏览器编写代码.作为一个专业的开发 ...

  2. 012PHP基础知识——运算符(五)

    <?php /** * 运算符的短路: * && 逻辑与 || 逻辑或 存在短路: */ /* $a = 1; $a==1 ||$c=100; //逻辑或:第一个表达式返回tru ...

  3. Qt中使用ActiveX控件

    (转自:http://blog.csdn.net/tingsking18/article/details/5403038) 在Qt中使用ActiveX控件 Qt的windows商业版本提供了Activ ...

  4. LeetCode OJ:Find Median from Data Stream(找数据流的中数)

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  5. LeetCode OJ:N-Queens(N皇后问题)

    Given an integer n, return all distinct solutions to the n-queens puzzle. Each solution contains a d ...

  6. ansible配置文件 ansible.cfg的一点说明

    ansible配置文件 ansible.cfg的一点说明 > ansible --version ansible 2.1.1.0 config file = /etc/ansible/ansib ...

  7. eclipse集群tomcat

    eclipse集群tomcat 1.  File -> new -> other 选择server. 2.  选择Apache下边对应的tomcat版本,配置tomcat名称即可.由于我本 ...

  8. L150 Mystery Illness Causing Paralysis in Children Baffles Doctors

    Federal and state health officials are baffled by a mysterious and rare illness that seems to target ...

  9. javaScript高程笔记--最佳实践

    1.可维护性 <1>什么是可维护的代码 (1)可理解性 (2)直观性 (3)可适应性 (4)可扩展性 (5)可调试性 <2>代码约定 (1)可读性---适当的进行注释[函数和方 ...

  10. Java 代码规范,你应该知道的一些工具和用法

    从事编程这个行业,你一定被别人说过或者说过别人这句话:代码要规范!求职面试时也能从 JD 上看到这个要求:要有良好的编程习惯.其实都是在讲代码规范(Code Style)这件事情. 每个人都有自己的编 ...