webpack安裝和使用

時間 2019-11-13

標籤 webpack 安裝使用简体版

原文原文鏈接

1、webpack是什麼？

webpack是一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。 webpack 的核心是依賴分析,把依賴分析出來了，其餘都是細枝末節了

2、安裝webpack

①前提，你的電腦須要安裝node和npm,若是沒的話先去官方下載!!!

我是全局安裝的： npm install webpack -g 我的以爲最好在你的項目中也包含一份獨立的 Webpack，這樣你更方便管理你的項目 npm install --save-dev webpack 若是安裝成功會顯示以下圖

②一般咱們會將 Webpack 安裝到項目的依賴中，這樣就可使用項目本地版本的 Webpack。

安裝webpack依賴包

安裝依賴包成功會顯示下圖紅色線條是路徑

$ npm install webpack --save-dev

Webpack 目前有兩個主版本，一個是在 master 主幹的穩定版，一個是在 webpack-2 分支的測試版，測試版擁有一些實驗性功能而且和穩定版不兼容，在正式項目中應該使用穩定版。

檢查webpack版本

$ npm info webpack

若是須要使用 Webpack 開發工具，要單獨安裝：

$ npm install webpack-dev-server --save-dev

2、使用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.

Hash: 279c7601d5d08396e751
Version: webpack 1.12.2
Time: 63ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.57 kB       0  [emitted]  main
   [0] ./entry.js 66 bytes {0} [built]
   [1] ./module.js 43 bytes {0} [built]