1.1什么是WebPack
webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包工具：它做的事情是调缨，分析你的項目結構达吞，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss幽告，TypeScript等）神凑，并生成一個或多個 bundle象浑，將其打包為合適的格式以供瀏覽器使用旭等。
webpack構建：構建就是把源代碼轉換成發(fā)布到線上的可執(zhí)行 JavaScrip、CSS疗锐、HTML 代碼坊谁，包括如下內(nèi)容。
1.代碼轉換：TypeScript 編譯成 JavaScript滑臊、SCSS或Less 編譯成 CSS 等口芍。
2.文件優(yōu)化：壓縮 JavaScript、CSS雇卷、HTML 代碼鬓椭，壓縮合并圖片等。
3.代碼分割：提取多個頁面的公共代碼关划、提取首屏不需要執(zhí)行部分的代碼讓其異步加載小染。
4.模塊合并：在采用模塊化的項目里會有很多個模塊和文件，需要構建功能把模塊分類合并成一個文件贮折。
5.自動刷新：監(jiān)聽本地源代碼的變化氧映，自動重新構建、刷新瀏覽器,nodemon脱货。
6.代碼校驗：在代碼被提交到倉庫前需要校驗代碼是否符合規(guī)范，以及單元測試是否通過律姨。
7.自動發(fā)布：更新完代碼后振峻，自動構建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。
構建其實是工程化择份、自動化思想在前端開發(fā)中的體現(xiàn)扣孟，把一系列流程用代碼去實現(xiàn)，讓代碼自動化地執(zhí)行這一系列復雜的流程荣赶。 構建給前端開發(fā)注入了更大的活力凤价，解放了我們的生產(chǎn)力,更加方便了我們的開發(fā)。
1.2 什么是 webpack 模塊
- ES2015 import 語句
- CommonJS require() 語句
- AMD define 和 require 語句
- css/sass/less 文件中的 @import 語句
- 樣式(url(...))或 HTML 文件(<img src=...>)中的圖片鏈接
詳細請看官網(wǎng)文檔： Modules MODULES
1.3 搭建Webpack環(huán)境
- 去官網(wǎng)下載node
// 查看node版本號
node -v
// 查看npm版本號
npm -v
1.4 初始化項目
mkdir webpack-test
cd webpack-test
//初始化webpack配置清單package.json
npm init -y //-y會使用默認配置拔创，不會中斷詢問
1.5 安裝webpack
- 不推薦：
//全局安裝利诺，因為如果有兩個項目用了webpack不同版本，就會出現(xiàn)版本不統(tǒng)一運行不起來的情況剩燥。只有卸了當前版本安裝對應版本非常麻煩慢逾。
npm install webpack webpack-cli -g
//查看版本
webpack -v
//全局卸載
npm uninstall webpack webpack-cli -g
- 推薦使用：
//在項目里安裝webpack。可以在不同項目中使用不同的webpack版本侣滩。
cd webpack-productname
npm install webpack webpack-cli -D
//查看版本
npx webpack -v
//查看對用包的詳細信息
npm info webpack
//安裝指定版本包
npm install webpack@4.16.1 webpack-cli -D
webpack-cli：使我們們可以在命令行里正確的使用webpack
1.6 webpack的配置文件
webpack 開箱即用口注，可以無需使用任何配置文件。然而君珠，webpack 會假定項目的入口起點為 src/index寝志，然后會在 dist/main.js 輸出結果，并且在生產(chǎn)環(huán)境開啟壓縮和優(yōu)化策添。通常材部，你的項目還需要繼續(xù)擴展此能力，為此你可以在項目根目錄下創(chuàng)建一個 webpack.config.js 文件舰攒，webpack 會自動使用它败富。
在項目根目錄下創(chuàng)建 webpack.config.js 文件，這是webpack默認配置文件
const path = require('path')
module.exports = {
//默認是production摩窃，打包的文件默認被壓縮兽叮。開發(fā)時可以設置為development，不被壓縮
mode:'production',
//打包項目的入口文件
entry: './index.js',
//打包項目的輸出文件
output: {
//自定義打包輸出文件名
filename:'bundle.js',
//輸出文件的絕對路徑
path: path.resolve(__dirname,'bundle')
}
}
也可以自己指定配置文件來完成webpack的打包：
npx webpack --config + 自定義配置文件
