webpack知識彙總

2021-10-07 19:21:26 字數 1332 閱讀 2178

輪詢監聽檔案的更新時間有沒有變化,若有變化,把檔案的變化快取起來,等待 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...