分享webpack實例教程

Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則產生對應的靜態資源。

安裝 Webpack

在安裝 Webpack 前，你本地環境需要支援 node.js。

由於npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令cnpm

#首先全域安裝webpack，再npm初始化一個項目，並局部安裝webpack開發工具

#

$ npm install webpack -g

npm init (项目名称)

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

在專案目錄下建立app資料夾，並建立index.js文件，寫入如下程式碼

##

console.log('hello world');

#在專案資料夾下開啟命令列，輸入如下指令

webpack app/index.js build/index.js

出現如下程式碼即為成功

看下build/index.js檔案的程式碼：

#可以看到73行就是我們app/index.js 檔案的程式碼

具體原始碼等改天我們再分析，今天我們主要的目的就是體驗。

這樣一個程式碼敲效率太低，我們可以透過webpack.config.js檔案來完成更進階的功能。

以上是分享webpack實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！