webpack的小外掛程式

1.clean-webpack-plugin：由於每次打包的時候有可能檔名稱不一樣，打包後的檔案就疊加到dist目錄下了，clean-webpack-plugin作用就是在每次打包之前，先把dist目錄刪掉，建立最新的目錄，避免不需要的檔案還留在dist目錄下。

安裝：npm install clean-webpack-plugin -d

使用：

//

引入clean-webpack-plugin的包
const  = require('clean-webpack-plugin');
//在plugins中配置
plugins: [new cleanwebpackplugin()]

2.copy-webpack-plugin：如果我們想要把乙個資料夾裡的內容也拷貝到dist目錄下，可以使用copy-webpack-plugin外掛程式。

安裝：npm install copy-webpack-plugin -d

使用：

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

plugins: [
newcopywebpackplugin([
//從doc目錄下拷貝到dist根目錄下
//注意，如果寫的是to:'./dist'，則會在dist目錄下再建立乙個dist資料夾，然後將拷貝的檔案放在裡面
])]

使用：

const webpack = require('webpack');

plugins: [
//打包後這條資訊就會插入到每個js檔案的頭部
new webpack.bannerplugin('make 2019 by ***')
]

webpack外掛程式配置及常用外掛程式

plugins new webpack.provideplugin new webpack.ignoreplugin locale moment 有的外掛程式是開發模式不用，到生產模式下才用,可如下設定 production 指生產模式 new webpack.optimize.uglifyjspl...

webpack 外掛程式總結歸類

自動生成html，基本用法 new htmlwebpackplugin 複製 拷貝資源外掛程式 基本用法 new copywebpackplugin 複製 倆個外掛程式效果一致，都是生成編譯結果的資源單，只是資源單的資料結構不一致而已。webpack manifest plugin 基本用法 mod...

webpack 外掛程式總結歸類

自動生成html，基本用法 new htmlwebpackplugin 拷貝資源外掛程式 基本用法 new copywebpackplugin 倆個外掛程式效果一致，都是生成編譯結果的資源單，只是資源單的資料結構不一致而已。webpack manifest plugin 基本用法 module.ex...