webpack4 0基本用法

2021-09-11 19:04:51 字數 2559 閱讀 9380

總結了一下webpack4.0基本用法,

基本上所有配置都有注釋說明,超級詳細啊!

dist是打包目錄

//js壓縮外掛程式

const htmlplugin =

require

('html-webpack-plugin');

//實現html打包功能,引用好路徑的到html來

const glob =

require

('glob');

const cleanwebpackplugin =

require

('clean-webpack-plugin');

// 打包前先清空dist

const minics***tractplugin =

require

("mini-css-extract-plugin");

//分離js中的css

const optimizecssassetsplugin =

require

("optimize-css-assets-webpack-plugin");

//css壓縮

const webpack =

require

('webpack');

const devmode = process.env.

node_env

!=='production'

;var website =

function

recursiveissuer

(m)else

if(m.name)

else

}module.exports =

, output:

,//模組,例如解讀css,轉換,壓縮

module:

, include:

/src/

,// 只轉化src目錄下的js

exclude:

/node_modules/

//排除},

//css loader

,//(主要css中) loader}]

},// 引用字型和svg

,// html中的,]

},optimization:

,test

(module, chunks)

,// priority: 10, //優先順序,乙個chunk很可能滿足多個快取組,會被抽取到優先順序高的快取組中

// minchunks: 2, //最少被幾個chunk引用

// reuseexistingchunk: true,// 如果該chunk中引用了已經被抽取的chunk,直接引用該chunk,不會重複打包**

// enforce: true // 如果cachegroup中沒有設定minsize,則據此判斷是否使用上層的minsize,true:則使用0,false:使用上層minsize},

foostyles:

, barstyles:}}

},//外掛程式,用於生產模版和各項功能

plugins:

[new

cleanwebpackplugin

('dist'),

// 打包前先清空

newuglify

(// ),

newminics***tractplugin()

,new

optimizecssassetsplugin

(,//傳遞給cssprocessor的選項,預設為 {}

// canprint: true//乙個布林值,指示外掛程式是否可以將訊息列印到控制台,預設為 true})

,new

htmlplugin(,

hash:

true

,//為了開發中js有快取效果,所以加入hash,這樣可以有效避免快取js。

template:

'./src/index.html'

//是要打包的html模版路徑和檔名稱。})

,new

webpack.hotmodulereplacementplugin()

,// 熱更新,熱更新不是重新整理],

//配置webpack開發服務功能,npm install webpack-dev-server

devserver:

}

,"keywords":[

],"author"

:"tkbnice"

,"license"

:"isc"

,"devdependencies":,

"dependencies"

:}

手寫webpack4 0的配置

webpack詳解 webpack是乙個打包工具,他的宗旨是一切靜態資源即可打包。有人就會問為什麼要webpack?webpack是現代前端技術的基石,常規的開發方式,比如jquery,html,css靜態網頁開發已經落後了。現在是mvvm的時代,資料驅動介面。webpack將現代js開發中的各種新...

webpack4 0配置記錄(1)

趁著假期閒暇,練習下webpack4.0的一些配置。let uglifyjsplugin require uglifyjs webpack plugin let optimizecssassetsplugin require optimize css assets webpack plugin op...

webpack4 0 相關外掛程式集

let htmlwebpackplugin require html webpack plugin 網頁模板外掛程式 let minics tractplugin require mini css extract plugin 樣式打包外掛程式 let optimizecss require opt...