webpack是一種前端資源構建工具 乙個靜態模組打包器
在webpack看來 前端所有資源檔案都會作為模組處理
他將根據模組的依賴關係進行靜態分析 打包生成對應的靜態資源
webpack 可以做到按需載入。像 grunt、gulp 這類構建工具，打包的思路是：遍歷原始檔→匹配規則→打包，這個過程中做不到按需載入，即對於打包起來的資源，到底頁面用不用，打包過程中是不關心的。
1、模組化；2、tree shaking；3、**懶載入
webpack的核心概念：
1. entry 入口檔案 // 好比main.js
2. output 出口檔案 // 好比dist 打包之後的資料夾
3. plugin 外掛程式 // 自動生成html檔案等外掛程式
4. loader 轉換器 // sass less 轉換成我們想要的檔案型別
5. dev-serve 伺服器 // 使我們webpack在本地執行 服務
6. mode 模式 // 可以切換開發環境 和 生成環境
1.確認 當前環境有沒有 webpack -v
win+r cmd 到全域性環境 使用webpack -v檢視2.在想要成為 打包檔案的資料夾中，使用 npm init -y 初始化乙個package.json
3.建立乙個src，src下面建立乙個index.html ,裡面加乙個div div隨便起乙個 id root名字，讓引入bundle.js
4.src 中建立乙個 main.js 作為主要開發檔案，在裡面進行dom操作，操作html中的div
5.打包在命令框
使用指令在命令框打包
webpack src/main.js --output src/bundle.js這樣打包太過麻煩我們建立乙個webpack.config.js在裡面定義webpack打包的屬性
const path =
require
("path"
)module.exports =
}
執行webpack命令就可以進行打包
4.建立本地伺服器
cnpm i webpack-dev-server -d在webpack.json 裡的scripts裡面設定熱更新跟啟動埠
"scripts"
:,
cnpm i node-sass sass-loader style-loader css-loader -d2.在webpack.config.js 配置 規則
const path =
require
("path"
)module.exports =
, modules:]}
}
webpack打包工具
終端執行 yarn webpack或者 在package.json中加入 scripts 開發模式 yarn webpack mode development原始模式 yarn webpack mode none在webpack.config.js中增加mode的模式 mode developmen...
webpack打包工具
目的 平時小專案中例如一些 需要進行打包壓縮，用這個工具可以進行打包壓縮，就可以上傳到伺服器。使用方法 1，引進需要打包的專案，把入口html替換掉專案中的index.html，把引進的js，css都放在src裡面對應的資料夾裡面 2，npm install 3，進行webpack.config.j...
webpack打包工具的使用
一 什麼是webpack?webpack是乙個模組打包工具。用vue專案來舉例 瀏覽器它是只認識js，不認識vue的。而我們寫的 字尾大多是.vue的，在每個.vue檔案中都可能html js css甚至是資源 並且由於元件化，這些.vue檔案之間還有錯綜複雜的關係。所以專案要被瀏覽器識別，我們就要...