webpack4 常用外掛程式列表及使用說明

2021-09-13 14:54:44 字數 1774 閱讀 7941

在webpack中拷貝單個檔案或多個檔案或整個目錄, 可用於大型類庫的拷貝

npmjs:

github:

const copywebpackplugin = require('copy-webpack-plugin');

new copywebpackplugin([

], options)

打包編譯時,可剔除頁面和js中未被使用的css,這樣使用第三方的類庫時,只載入被使用的類,大大減小css體積

new purifycssplugin()壓縮css,優化css結構,利於網頁載入和渲染

npmjs:

new optimizecssassetsplugin( },

canprint: true

})

編譯輸出檔案前,刪除舊檔案,當利用檔案hash值輸出時,可以利用改外掛程式刪除原有檔案

npmjs:

new cleanwebpackplugin(['dist','build'], )
當less檔案作為入口檔案,而不是在js中載入時,會額外生成無用的js檔案,可以利用該外掛程式去除這些檔案

npmjs:

new removewebpackplugin()
打包編譯時,顯示進度條

npmjs:

new progressbarplugin();
規範scss, less,css書寫規則

npmjs:

roles:

new stylelintplugin()
這個外掛程式將css解壓到單獨的檔案中。它為每個包含css的js檔案建立乙個css檔案。extract-text-webpack-plugin該外掛程式在webpack4中不再建議使用

npmjs:

new minics***tractplugin(),
可以並行執行uglifyjs外掛程式,這可以有效減少構建時間

npmjs:

new paralleluglifyplugin(,

compress:

}})

const os = require('os');

//plugin

id: 'less',

loaders:

}),//loader

const minics***tractplugin = require('mini-css-extract-plugin');,

生成資源路徑和檔名對應關係,可利用該外掛程式生成輸出帶有hash值的檔名。摒棄了利用版本號來更新快取。利用檔案內容生成hash值時,使用者只需要更新被改動過的檔案。

npmjs:

new assetsplugin(;);
該專案已經整合以上所有外掛程式,可以前來學習借鑑。

專案說明

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash,根據chunk自身的內容計算而來,js name chunkhash...

webpack4快速上手

1.在專案根目錄cnpm init y初始化。生成package.json檔案 2.在專案裡面使用cnpm安裝webpack 3.需要在根目錄下新建webpack.config.js檔案 在其裡面配置暴露物件 module.exports 4.在根目錄下新建src index.js檔案 因為此時執行...

webpack4 基本使用

webpack是基於node構建,所以wepack支援所有node api和語法。即 chrome瀏覽器能支援的ecmascript語法 排除dom bom wbpack都能支援。chrome不支援es6,所以webpack也不支援。建立基本的webpack4.x專案 建立後的目錄 其中 packa...