死命簡單的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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。