webpack(二)配置

webpack項目配置

之前已經安裝過webpack全局環境,下面結合項目看一下打包過程。
首先創建一個靜態頁面 index.html 和一個 JS 入口文件 entry.js:

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')

然後編譯 entry.js 並打包到 bundle.js:

$ webpack entry.js bundle.js

打包過程會顯示日誌:

Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]

用瀏覽器打開 index.html 將會看到 It works. 。

接下來添加一個模塊 module.js 並修改入口 entry.js:

// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模塊

重新打包 webpack entry.js bundle.js 後刷新頁面看到變化 It works.It works from module.js.

發佈了29 篇原創文章 · 獲贊 78 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章