webpack第一堂-初體驗

學習webpack動機

想要學習webpack原因是，當我接觸vue開發SPA時，網路上大家推崇使用webpack開發可以優化JS腳本，webpack的強大功能讓我更專注開發。

webpack 介紹

官網: webpack官網
官方文件: webpack document
Webpack 是一個模組打包器( module bundler) ，簡單來說webpack是可以將你網頁呼叫到相關模組的函示，打包並編譯成一個最小化的檔案，並讓他在任何瀏覽器都可以正常執行。

Webpack 是德國開發者 Tobias Koppers 建置模組化工具，他同時支援AMD、CMD的規則，他有下列特性

• 代碼分割
  同步:編譯時會直接把打包輸出文件
  異步: 單獨生成一個代碼，只有在運行時才會載入
• 載入器
  在預設下，只可以打包JS文件，但是通過載入器也可以將其他類型的文件轉成JS文件
• 插件
  當webpack功能不能滿足我們需求，可以安裝插件擴充功能

實作

• 安裝webpack
  全局安裝

 $ npm install webpack -g

建立專案

 $ npm init

最後，在專案中安裝webpack並寫入package.json

 $ npm i webpack --save-dev

• 第一次使用就上手
  我們件ㄌㄧ簡單的範例，使用
  example
  |-app.js
  |-cats.js

範例: app.js 主要編譯入口文件

cats = require("./cats.js")
console.log(cats)

範例: cats.js

var cats = ['dev1','2222','333']
module.exports = cats

我們在node命令中心執行打包的指令

指令 : webpack 入口文件.js 輸出文件.js

     webpack ./app.js   app.bundle.js

node執行app.bundle.js看看結果如何

    webpack app.bundle.js

結果: [ ‘dev1’, ‘2222’, ‘333’ ]

結論

使用webpack把包後的程式碼可以使用任何的環境執行，包含瀏覽器的環境中。

1. plungs列表
2. 如何使用 Webpack 模組整合工具
3. Vue.js 權威指南