總結了一下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...