項(xiàng)目在我的git秀姐，需要的小伙伴去看看吧慈迈！
https://github.com/LilyLaw/webpack-template
歡迎star！
整體架構(gòu)
該框架將開發(fā)模式和生產(chǎn)模式下的公共配置提取出來,通過webpack-merge來整合，減少代碼冗余
css相關(guān)
-
style-loader
將css寫進(jìn)一對<style>標(biāo)簽里痒留，再通過JavaScript腳本把這個(gè)標(biāo)簽注入到html頁面谴麦，如下圖
style-loader.png這個(gè)一般在開發(fā)環(huán)境中使用，生產(chǎn)環(huán)境中盡量抽取css到單獨(dú)的文件
-
在項(xiàng)目中伸头，如果是通過
@import,require(),url()等方式調(diào)用css匾效，webpack是無法解析的，webpack默認(rèn)只能解析JavaScript恤磷，所以需要css-loader來解析上述語法面哼。 -
在
webpack中將less編譯成css -
postcss-loader
內(nèi)容太多，先去看看 postcss 是什么吧 https://postcss.org/
-
單獨(dú)抽取出css文件扫步，只能在
production模式下使用,用了這個(gè)插件就不能再用style-loader了魔策。 -
css壓縮插件，把一些空格換行之類的字符去掉河胎，減少文件大小
js相關(guān)
-
目前并非全部瀏覽器都會支持babel語法,所以在
webpack環(huán)境中需要將babel語法轉(zhuǎn)換為瀏覽器可識別的js語法,babel-loader就是來做這個(gè)的闯袒。 -
基于webpack的js語法檢測工具，如果有語法錯(cuò)誤程序必須先將問題解決否則無法運(yùn)行
-
js壓縮插件
注意 js壓縮插件
uglifyjs-webpack-plugin默認(rèn)無法壓縮ES6語法的js代碼游岳，因此需要babel來預(yù)先解析成ES5的語法政敢。否則會報(bào)錯(cuò)<font color=#00ffff>ERROR in main.js from UglifyJs Unexpected token: name ?domsss?, expected: punc ?;? [./src/index.js:5,0][main.js:17207,5]</font>
非js文件相關(guān)
-
webpack默認(rèn)只能處理js文件，對于
.png,jpg,jpeg等格式的圖片或其他文件是無法識別的吭历，會報(bào)錯(cuò)堕仔。為了可以使用這些文件，需要用url-loader解析晌区。
若文件小于設(shè)置的體積摩骨，可轉(zhuǎn)換為base64編碼格式。注意
url-loader內(nèi)部已集成了file-loader,所以如果使用url-loader就不必再用file-loader -
壓縮圖片
其他
-
把打包后的 CSS 或者 JS 文件的引用直接注入到 HTML 模板中（動(dòng)態(tài)的添加
link,script,不再是將整個(gè)文件注入到html中）朗若，這樣就不用每次手動(dòng)修改文件引用了（尤其是文件名中有哈希值的時(shí)候）恼五。 -
每一次打包的時(shí)候，先將上一次打包的文件清理掉哭懈，放置過期無用文件堆積
-
分析你的代碼灾馒，并計(jì)算各個(gè)依賴在使用中的大小，最后生成一個(gè)分析圖遣总，非常直觀睬罗，讓你可以知道哪部分該優(yōu)化了。
注意
-
loader如果是一個(gè)數(shù)組旭斥，則調(diào)用順序是從后往前容达。 比如 處理less用到了 less-loader，css-loader垂券，style-loader花盐，因此正確寫法應(yīng)該像下面：
{ test:/\.less$/, use:['style-loader','css-loader','less-loader'] }
