webpack入門教程之Hello webpack(一)

時間 2019-11-29

標籤 webpack 入門教程 hello 简体版

原文原文鏈接

　　webpack入門教程系列爲官網Tutorials的我的譯文，旨在給予想要學習webpack的小夥伴一個另外的途徑。若有不當之處，請你們指出。javascript

　　看完入門教程系列後，你將會學習到以下內容：html

　　1.如何安裝webpackjava

　　2.如何使用webpacknode

　　3.如何使用loaderswebpack

　　4.如何使用開發服務器web

　　話很少說，立刻開啓咱們的webpack之旅......npm

1、安裝webpack(依賴nodeJs環境，nodejs環境的搭建不在此贅述)瀏覽器

npm install webpack -g

2、 Hello Wepack服務器

1. 建立一個空的文件夾，新建entry.js文件。函數

document.write("Hello webpack.");

2. 新建index.html文件。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

3. 在當前文件夾打開命令行，執行webpack ./entry.js bundle.js。執行後，webpack會編譯entry.js並生成bundle.js文件。成功的話，會打印出以下相似信息。

  Version: webpack 1.12.11
  Time: 51ms
    Asset     Size  Chunks             Chunk Names
  bundle.js  1.42 kB       0  [emitted]  main
  chunk    {0} bundle.js (main) 28 bytes [rendered]
    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

4. 使用瀏覽器打開index.html，將會看到"Hello webpack"。

5. 接下來，咱們將部分代碼移動至另外一個文件。新建content.js文件。

module.exports = "Hello webpack, it works from content.js.";

6. 更新entry.js爲

+ document.write(require("./content.js"));

7. 而後再次執行webpack ./entry.js bundle.js，刷新瀏覽器窗口將會看到顯示出"Hello webpack, It works from content.js"。

(webpack會分析你的入口文件所依賴的文件，這些文件(稱做modules)一樣會被包含到bundle.js中。webpack會給每個modules一個惟一的id，而且在bundle.js中能夠經過id來訪問modules。
只有enrty module會在啓動時執行。另外能夠經過require函數引用其餘modules，並在須要時執行依賴關係。)

8. 上述步驟中咱們學習了使用webpack來編譯js文件以及如何在一個js文件中引用另外一個module。

1. Webpack 入門教程一
2. webpack 入門教程
3. Webpack 入門教程
4. Webpack入門教程
5. webpack入門教程
6. Webpack簡易入門教程
7. Webpack 入門教程6
8. Webpack入門教程十六
9. webpack輕鬆入門教程
10. webpack入門級教程
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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