webpack系列之基本概念和使用

時間 2019-11-06

標籤 webpack 系列基本概念使用简体版

原文原文鏈接

webpack系列之基本概念和使用

歡迎你們訪問個人github blog查看更多文章php

前言

最近在作vue項目，天然而然就接觸到了webpack這個打包工具，藉此把一些總結分享出來。
webpack知識點比較多，打算作爲一個系列分篇講解，今天先分享第一篇：webpack系列之基本概念和使用。html

一. 什麼是webpack

webpack能夠看作是模塊打包工具：它將各類靜態資源（好比：JavaScript 文件，圖片文件，樣式文件等）視爲模塊，它可以對這些模塊進行解析優化和轉換等操做，最後將它們打包在一塊兒，打包後的文件可用於在瀏覽器中使用。vue

下面看一個圖可以很清晰的展示這個打包流程：
node

二. 爲何使用webpack

先舉一個你們都很熟悉的例子：webpack

一臺計算機內部須要不少不少根線來鏈接單元器件，假如每條線不按規則擺放，將要佔用極大的空間，且很差管理。幸虧人們發明了集成電路，纔有了現代計算機的板卡。

你們看，經過這個板卡，全部的元器件，電線都按規則擺放，規整有序，很大的節省了空間，並且也很方便管理。git

你能夠把webpack看作是這個板卡，項目中的各類各樣的JavaScript程序和依賴包能夠當作是計算機內部須要的不少根線和單元器件，webpack經過loader將這些JavaScript程序和依賴包都轉換成JavaScript 模塊，就比如咱們將單元器件和線按照必定的規則擺放，放在固定的位置方便管理，這樣經過webpack咱們就把一個項目中的複雜程序細化爲了各類具備依賴關係的模塊，從而使咱們的項目管理起來更加方便。github

`webpack`優點

webpack能替代部分 grunt/gulp 的工做，好比打包、壓縮混淆、圖片轉base64等，並且還具備如下幾點優點：web

webpack 是以 commonJS 的形式來書寫腳本的，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移
能被模塊化的不只僅是 JS 了
擴展性強，具備強大的插件（Plugin）接口，使用起來比較靈活，特別是支持熱插拔的功能很實用
能夠將代碼切割成不一樣的塊（chunk），每一個塊包含一個或多個模塊，塊能夠按需被異步加載，下降了初始化時間
......

三. 基本概念

在正式講解怎麼使用webpack以前，你須要先理解四個核心概念：npm

入口(entry)
輸出(output)
loader
插件(plugins)

本篇作爲一個開門篇，先講解前兩個核心概念：入口(entry)和輸出(output)。json

3.1 入口(entry)

入口起點(entry point)指示 webpack 應該使用哪一個模塊作爲入口文件，來做爲構建其內部依賴圖的開始。進去入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的，每一個依賴項隨即被處理，最後輸出到稱之爲 bundles 的文件中。

3.2 出口(output)

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，這些均可以在webpack的配置文件中指定，後面的案例會給你們介紹怎麼去配置。

四.案例

在講了webpack是什麼，爲何使用webpack，以及兩個核心概念後，咱們來作一個小案例來真實感覺一下。

4.1 基本安裝

咱們建立一個目錄，初始化npm，而且在本地使用npm安裝webpack

mkdir webpack-demo && cd webpack-demo
npm init
npm install --save-dev webpack

4.2 目錄結構

├── node_modules
├── dist
│   └── index.html
├── package-lock.json
├── package.json
└── src
    └── index.js

4.3 修改入口文件

打開src\index.js，添加以下代碼：

var element = document.createElement('div');
   element.innerHTML = 'webpack demo！';
   document.body.appendChild(element);

4.4 執行打包命令

➜  webpack-demo webpack src/index.js dist/bundle.js
Hash: 2432d7e2ecc1d3cb0c5b
Version: webpack 3.10.0
Time: 63ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.65 kB       0  [emitted]  main
   [0] ./src/index.js 179 bytes {0} [built]

打開dist目錄，你會發現打包後的文件bundle.js已經生成。

4.5 引入`bundle.js`

打開dist\index.html添加以下代碼：

<html>
  <head>
    <title>webpack練習</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

4.6 效果

直接瀏覽器打開 index.html：

4.7 使用配置文件

可能你們看到打包命令後會有疑問：

這個打包命令有點長，這樣豈不是很容易出錯?

的確，webpack有許多比較高級的功能均可以經過命令行模式去實現，可是這樣很不方便，且容易出錯，更好的辦法就是定義個配置文件，咱們能夠把全部的與打包相關的信息放在裏面。這比在終端(terminal)中輸入大量命令要高效的多。

那該怎麼作呢？

咱們新建一個webpack配置文件：webpack.config.js:

module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/index.js",  //入口文件
    output: {
        path: __dirname + "/dist",  //打包後的文件存放的地方
        filename: "bundle.js" //打包後輸出文件的文件名
    }
}

命令行執行只須要：webpack便可實現打包：

➜  webpack-demo webpack
Hash: 37ae154d97c486e04d87
Version: webpack 3.10.0
Time: 73ms
    Asset    Size  Chunks             Chunk Names
bundle.js  3.4 kB       0  [emitted]  main
   [0] ./src/index.js 179 bytes {0} [built]

這條命令會自動引用webpack.config.js文件中的配置選項進行打包，再次訪問index.html，會發現第一種打包方式後輸出一樣的結果，可是簡化了命令，也下降了因命令行過長而致使的錯誤。

注意：