webpack是什麼?
Webpack 是一種前端資源建構工具,一個靜态子產品打包器(module bundler)
在Webpack 看來,前端的所有資源檔案(js| json | css | img| sass…)都會作為子產品處理
它将根據子產品的依賴關系進行靜态分析,打包生成對應的靜态資源(bundle)
webpack 的五個核心概念
Enery
入口(Enery)訓示 webpack 以那個檔案為入口起點開始打包,分析建構内部依賴圖
Output
輸出(Output)訓示 webpack 打包後的資源 bundles 輸出到哪裡去,以及如何命名
Loader
Loader 讓 webpack 能夠去處理那些非JavaScript 檔案(webpack 自身隻了解JavaScript)
Plugins
插件(Plugins)可以用于執行範圍更廣的任務,插件的範圍包括,從打包優化和壓縮,一直到重新定義環境中的變量
Mode
區分開發環境和生産環境的編譯:development(開發環境)和production(生産環境)
如何區分:
把process.env.NODE_ENV 的值設為 development是開發模式
把process.env.NODE_ENV 的值設為 production是開發模式
webpack 建立和使用
建立:首先我們要建立一個目錄,然後初始化 npm 執行 npm init 一路回車,或npm init -y 生成一個package.json檔案, 然後在本地安裝 webpack ,接着安裝 webpack-cli
首先執行以下指令進行 webpack和webpack-cli 的全局安裝
npm install webpack webpack-cli -g
然後建立一個項目的檔案夾, 使用下面第一個指令進行初始化,生成package.json,執行第二指令進行webpack和webpack-cli的本地安裝
npm init -y
npm install webpack webpack-cli --save-dev
簡單的使用執行個體
建立一個webpack-dome檔案夾, 然後使用指令安裝webpack和webpack-cli
npm init -y
npm install webpack webpack-cli --save-dev
然後在這個項目檔案夾中建立一個src檔案夾和一個build檔案夾,在裡面建立兩個檔案, index.js和aa.js; index.js就是webpack的預設入口檔案，而aa.js是index.js中用來舉例引用的
aa.js中的内容為
export default {
name:'張三',
age:18
}
然後我們要輸入下面的指令進行打包操作
這是開發環境進行打包
webpack ./src/index.js -o ./build --mode=development
這是生産環境進行打包
webpack ./src/index.js -o ./build --mode=production
./src/index.js 指定入口檔案
-o 是指定輸出檔案的放置位置
./build 打包之後的檔案(最新版webpack會自動生成一個main.ja,main.ja就是打包後的代碼)
--mode= 是指定模式, development為開發模式, production 為生産模式
開發環境進行打包後的結果:
首先在npm中執行 webpack ./src/index.js -o ./build --mode=development 指令,執行完後為以下結果就代表你打包成功了
然後我們可以看到build檔案中會出現一個main.js這就是打包完後生成的代碼檔案
你可在build檔案夾中寫一個index.html,并引入打包後生成的main.js來檢視輸出後的結果,結果為:
生産環境的打包和開發環境的打包步驟一樣,不過main.js中的代碼不同,結果為:
webpack子產品化
在你開發完代碼後,進行打包時webpack并不強制你使用某種子產品化方案，而是通過相容所有子產品化方案讓你無痛接入項目;有了webpack，你可以随意選擇你喜歡的子產品化方案，至于怎麼處理子產品之間的依賴關系及如何按需打包，webpack會幫你處理好的。