1.前端專案模組打包器
2.生成依賴關係
html
cssjs
（資源）
3.自動化壓縮…
1.入口entry
2.出口output
0.1filename
檔名稱
0.2path
檔案路徑
3.loader載入器
0.1 test 處理哪些檔案
0.2 use 使用哪些loader載入器
0.3 讓webpack 擁有處理 打包非js檔案的能力
4.plugin外掛程式
使用步驟：1.安裝 2. require匯入 3. new 例項化
讓webpack在打包執行過程中，額外處理內容的能力：1.壓縮 2.優化 3.html模板生成
5.mode模式
prduction
產品模式
develoment
開發模式
const path = require("path")
module.exports =
}
1. npx webpack
2. npm run start
script:
package.json
css-loader
載入css
style-loader
style標籤載入css
minics***tractplugin.loader
把css抽出為單獨的css檔案
2.less
（less）編譯less檔案
less-loader 載入less檔案
1. html-webpack-plugin
處理html模板
1.title標題
<%= htmlwebpackplugin.options.title %>
2.minify:true,壓縮
3.template位址
2. mini-css-extract-plugin
css提取外掛程式
new minics***tractplugin()require(『optimize-css-assets-webpack-plugin』)
優化css
optimization: ,本地伺服器
1.配置
devserver
0.1host網域名稱
0.2port埠
0.3hot熱更新
0.4open開啟瀏覽器
0.5proxy**
2.執行
「serve」:「webpack-dev-server」,
webpack相關筆記
url c users 27509 desktop kaikeba demo webpack 工具 1.編譯類 babel es6 es5 2.打包 browserify 一堆檔案 單個檔案 3.開發輔助 browser sync 多端同步 4.測試類 單元測試 模組，函式 整合測試 壓力測試 效能...
Webpack學習筆記
自我總結 如其名，一些入口處的引導檔案 定義 output 位於物件最頂級鍵 key 包括了一組選項，指示 webpack 如何去輸出 以及在 輸出你的 bundle asset 和其他你所打包或使用 webpack 載入的任何內容 自我總結 這個也沒什麼說的，如其名，定義了最終生成檔案的位址以及其...
webpack 學習筆記
學習資源來自前端工程化 webpack.html 課程專題 使用webpack搭建生產環境工作流.html 這兩個教程必須同時看著，互相補充。impot和 export是es6新語法，需要用babel轉一下，直接執行不了 配置webpack.config.js時候，需要引入path模組。1 例 co...