yarn webpack --mode 模式可以切換webpack的打包模式，也可以在配置檔案中設定
production模式會優化打包的結果
development**模式會優化打包的速度
none模式會執行最原始的webpack配置，不做任何額外的處理
webpack內部的loader只能處理js檔案，其它的資源檔案需要載入其它loader
loader分類
css-loader將css檔案轉換為js檔案
style-loader將css-loader 轉換後的結果通過style標籤追加到頁面上
注乙個模組中使用了多個loader時，先執行的在後面
file-loader處理檔案，以單個檔案形式存放
url-loader將檔案資源轉換為data urls形式，直接內嵌使用
注
test:
/.png$/
,use:
}
相比於loader，plugin擁有更寬的能力範圍
yarn webpack --watch可以啟動觀察模式，監聽檔案的變化並自動編譯
devserver
webpack-dev-server外掛程式集自動編譯和自動重新整理頁面為一體，會自動執行打包命令和啟動http server，為了提高工作效率並沒有將打包結果寫入磁碟中，而是暫存到記憶體中的。使用yarn webpack-dev-server --open啟動
配置項
module.hot.
accept
('檔案路徑',(
不同環境下的配置
其它優化配置
***模組執行的時候除了匯出成員之外所做的事情稱為***
sideeffects會在打包中自動刪除帶有***的模組
檔案輸出名hash
webpack支援使用佔位符的方式給檔名加上hash值，可以在hash佔位符後加上:8來設定hash長度
chunkhash只會修改當前打包影響過的檔案hash
contenthash為不同的檔案生成單獨的hash值
webpack學習之路之webpack核心概念
webpack相關文件 webpack官網 webpack中文官網 webpack github位址 webpack 版本差異及修復bug webpack 主要4個核心概念 1 entry entry是某一段 的入口，這段 入口會告訴webpack 裡面有哪些模組的依賴。entry也是打包的入口，告...
webpack學習之webpack基本配置
壓縮檔案 分割 提取公用 模組合併 把多個模組合併 自動重新整理 熱更新 改變，自動重新整理頁面 由於外掛程式可以攜帶引數 選項，必須在 webpack 配置中，向 plugins 屬性傳入的是外掛程式的例項。let require clean webpack plguin new cleanweb...
前端 Webpack常用loader
6.webpack loader 6.1預設情況下 webpack 只能對js進行打包，因為只有js有模組的概念 6.2開發過程中，我們可能會打包css 等檔案，那麼就得使用相應的loader，讓這些檔案也被 模組化 以便於webpack能夠識別並打包 7.file loader 注 簡單拷貝的檔案...