死命简单的webpack

时间 2020-01-03

标签死命简单 webpack 繁體版

原文原文链接

webpack是一个打包器。当别人问你的时候，你也能够这么回答，哪怕彼此都不知道说了什么。可是看了个人介绍，你就知道打包器是啥了。实际上webpack存在的最初动机就是要把node.js的模块能力让客户端能够用。因此，让咱们从node的从一个模块案例开始。javascript

令前端开发垂涎的案例

文件b引出一个函数b:html

// b.js 
exports.b = function b(){
    console.log("b")
}

文件a引入此模块，并调用模块的引出函数b：前端

// a.js 
var b = require("./b.js")
b.b()

调用并查看输出：java

$node a.js 
b

前端开发的福音：webpack

这样的开发套路（引入一个模块，使用它）实在太过常见，以致于不须要额外的解释。然而，这么简单好用的模块能力，在前端并不存在！可是如今有了webpack就能够了，要作的就是使用webpack对以上代码作一个转义：node

$webpack a.js magic.js

而后，使用html引入它：webpack

<html>
  <body>
    <script type="text/javascript" src="magic.js"></script>
  </body>
</html>

打开浏览器访问此文件，就能够看到在浏览器的控制台内输出了b。程序员

模块是一个古老的分而治之的技术，从结构化编程范式开始就有了。然而js在语言层面，在客户端是不支持的，它必须靠外在的html标签<script>来实现粗浅的，仅仅能用的模块。另一个方面，js由于语言的柔性，倒是有可能实现本身的相对更好的模块，包括变量和函数的局部化等。你能够阅读下文件magic.js，魔法都在其中，可是要看懂，须要你弄明白js模块技术。能够参考阮一峰的系列文章。文后附有搜索词。web

实践考量

固然，更好的习惯是作一个配置文件编程

// webpack.config.js
module.exports = {
  entry: './a.js',
  output: {
    filename: 'bundle.js'
  }
};

有了它，程序员就没必要每次敲入webpack a.js magic.js,而只要webpack便可。配置文件略啰嗦，可是能够看出来就是替代了本有的webpack的命令行参数，而后各就各位。当执行webpack时：浏览器

$ webpack
Hash: ed9f2c850698ca3d8863
Version: webpack 1.13.1
Time: 51ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.55 kB       0  [emitted]  main
   [0] ./a.js 31 bytes {0} [built]
   [1] ./b.js 45 bytes {0} [built]

输出代表a文件，和它引入的b文件，都已经被转译完毕。转译到bundle文件内。

关于

做者：刘传君
建立过产品，创过业。很差动，读书机器。
能够经过 1000copy#gmail.com 联系到我

出品

http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...

参考文献的搜索词

Minimal but complete AMD implementationJavascript模块化编程（三）：require.js的用法Writing Modular JavaScript With AMD, CommonJS & ES HarmonyImmediately-Invoked Function Expression (IIFE)