輪詢監聽檔案的更新時間有沒有變化,若有變化,把檔案的變化快取起來,等待 aggregatetimeout 毫秒後將所有變化的檔案列表一起打包更新,每秒輪詢 poll 次
過程:
css 檔案指紋設定:設定 minics***tractplugin 的 filename,使用 [contenthash]
使用 html 內聯:raw-loader
js 內聯:raw-loader
css 內聯
glob =
require
('glob');
path =
require
('path');
const
setmpa=(
)=>
;const htmlwebpackplugins =
;let entryfiles = glob.
sync
(path.
join
(__dirname,
'./src/**/index.js'))
; object.
keys
(entryfiles)
.map
((file)
=>
/index.html`),
filename:`$
.html`
chunks:
[name],}
)})}
)return;}
const
=setmpa()
;
splitchunksplugin 進行公共指令碼分離
使用 dll plugin 分包,dllreferenceplugin 對 manifest.json 引用
原理
**擦除:uglify 階段刪除無用**
webapck 的模組機制
scope hoisting 的原理:
在 webpack4 中 production 環境下預設開啟
terser-webpack-plugin 壓縮
設定入口檔案:package.json 的 main 字段
npm publish(需要註冊登入 npm 賬號,npm login)
friendly-errors-webpack-plugin 外掛程式
速度分析:speed-measure-webpack-plugins
體積分析:webpack-bundle-analyzer
thread-loader,webpack4 內建
並行壓縮
webpack4知識彙總2
devserver 也可以使用中介軟體webpack dev middleware let webpack require webpack let middle require webpack dev middleware let compiler webpack config resolve pl...
webpack問題彙總
1.公升級 把webpack3.公升級至4.會出現問題 error webpack.optimize.uglifyjsplugin has been removed,please use config.optimization.minimize instead.上面很明確說出了解決方案,新增上面圈裡...
webpack知識整理
webpack基礎 webpack 基本安裝 一 webpack 使用webpack配置檔案 二 webpack 載入css 和字型 三 webpack 管理輸出 四 webpack 開發 五 webpack 模組熱更新 六 webpack 使用babel處理es6語法 七 webpack 實現對r...