Webpack的入門介紹

1.問題引入

原始的時候咱們編寫網頁程序，主要是編寫HTML文件，接着經過scrpit標籤引入一個index.js文件輔助編寫一些業務邏輯和DOM操做。若JS處理邏輯過多，index.js文件就會膨脹，並且編寫邏輯主要以面向過程爲主，很差維護和擴展。

接着能夠考慮一些例如面向對象的思想，將index.js我呢見拆分爲header.js,content.js,sidebar.js文件，內部各自處理負責對象的邏輯，這樣維護就相對簡單了，例如header的交互有問題只須要關注header.js文件了。

//index.js
let dom = document.getElementById('root');

new Header();
new Sidebar();
new Content();

可是這樣的話又會引入一些問題：

• HTML文件須要使用多個script標籤引入，減慢頁面加載速度
• script標籤順序也有要求，例如咱們把content.js放在index.js下面引入就會報錯

根據咱們如今的開發經驗，咱們能夠經過在index.js中經過ES Moudle的方式引入其餘JS文件來避免上述問題：

import Header from './header.js'
...

let dom = ...
...

可是直接這樣編寫index.js會報錯，由於瀏覽器不認識import語法，這裏就須要藉助webpack的一個功能。咱們嘗試安裝一下。

2.安裝Webpack

2.1 安裝node

首先咱們須要安裝node（包含npm），直接去官網下載便可。

這裏建議能夠安裝nvm，這是一個noode版本管理工具，當主機須要有多個不一樣node版本切換使用時能夠用它~

2.2 初始化環境

首先咱們初始化一個使用npm的項目：

npm init lesson1

而後進入安裝webpack包，這裏須要安裝一個webpack-cli幫助咱們在命令行界面使用webpack的功能，安裝分爲全局安裝和項目安裝，全局安裝：

npm install -g webpack webpack-cli

這個方式不推薦，主要是可能產生版本衝突問題，例如兩個項目用的webpack版本不一樣，那麼你就沒辦法用全局工具處理。

推薦項目中安裝，這裏推薦安裝一個固定的版原本進行後續練習，不然有可能出現一些異常：

npm install webpack@4.16.5 webpack-cli --save-dev

3. Webpack的使用

而後使用webpack翻譯index.js，這裏npx是npm提供的一個命令，幫助咱們在當前項目node_modules文件夾中找webpack：

npx webpack index.js

注意再次以前代碼有一些編寫事項要注意，首先index.jsimport的JS文件須要使用export導出，另外DOM節點須要每一個JS文件單獨獲取，沒辦法從index.js中得到：

function Header(){
    let dom = document.getElementById('root')
    ...
}
export default Header;

接着正常狀況下瀏覽器應該成功打開翻譯後的index.html文件（默認應該會翻譯到項目下dist文件夾）

4. Webpack是什麼？

經過上述的使用過程你是否是以爲彷佛webpack是相似Babel那樣的JS的解析翻譯工具呢？

其實不是的，他在的遠遠沒有這個量級，他也只能解析相似import這樣的模塊交互語句。

這裏咱們直接引用官網話來解釋：

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

webpack其實把各個模塊打包到一塊兒的一種工具。別的功能和翻譯都是沒有的。

固然除了ES Module這種模塊引入規範，還有CommonJS 模塊引入規範（Node用的），此外還有CMD，ADM規範，這些模塊規範Webpack都是能夠識別的，例如CommonJS：

const Header = require('/header.js')

導出模塊：

function Header(){
    ...
}

module.exports = Header;

最先的時候其實webpack是一個JS的模塊打包工具，只能require一下js文件，如今不只僅只能打包JS文件了，還能夠打包諸如css、png、jpg等等各類類型的文件。

5. Webpack的配置文件

這裏簡單介紹一下配置文件，webpack的具體如何打包你的項目就是依靠這個配置文件完成的，例如如何打包圖片文件？使用CommonJS仍是ES Module？

5.1 新增一個配置文件

實際上webpack存在一個默認配置文件的，若是你須要更復雜的配置你能夠在項目下新增一個webpack.config.js文件。

接着咱們嘗試編寫一些基礎配置內容：

const path = require('path');

module.export = {
    mode:'development', // 打包模式，開發環境下打包輸出文件不會作壓縮等處理方便調試
    entry:'./src/index.js' //入口文件，表示項目打包的起點文件
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist') // 打包文件放在哪裏，輸出文件名是啥
    }
}

接着咱們把以前編寫的源代碼放到src目錄下，從新打包就能夠了。

5.2 npm scripts配置

這裏用過React，Vue等小夥伴會以爲咱們以前好像沒有執行過相似npx webpack的命令，這是由於咱們使用了npm scripts，以npm run 方式來執行：

// package.json
{
    "name":"lesson",
    ...
    "scripts":{
        "bundle":"webpack"
    }
}

而後咱們就能夠執行npm run bundle來代替 npx webpack了，這裏使用npm run會自動去node_modules裏面尋找因此不須要加上npx~

6. 打包時的log說明

執行webpack打包過程當中命令行界面會彈出一些log信息：

• Hash：本地打包惟一Hash值
• Version：打包用webpack的版本
• Time：打包耗時（性能優化能夠關注）
• Asset：打包輸出文件
• Size：輸出文件大小
• Chunks：輸出文件ID，有的時候會有多個，由於你的bundle.js可能和其餘打包輸出文件有關聯
• Chunk Names：JS文件對應的名字，這個名字是webpack配置文件裏entry字段定義的key