4.0的webpack要比之前的版本強大的不是一點點
打包的時候也做了很多優化
然後說一些這段時間發現的有趣的技巧
1. 打包出來的檔案很大，不知道是什麼原因可以用 webpack-bundle-analyzer
很牛逼的分析工具，能知道打包出來的檔案的都來自於屬什麼地方，每個有多大
使用方法很簡單
1. 引入
2. 放到外掛程式裡
const bundleanalyzerplugin = require('
webpack-bundle-analyzer
').bundleanalyzerplugin;
config.plugins.push(然後打包之後就會在瀏覽器彈出頁面newbundleanalyzerplugin()
)
比如我這個就是在告訴我highlightjs太大了，700多kb這種解決方案，一般是想辦法抽離一部分highlight
這個玩意很炫酷，也很方便，強烈推薦
2. 公共模組分離
optimization: ,webpack4.0的拆分變得人性化多了，可以很方便的把node_modules裡的公共功能抽離出來，抽離出來不會有錯的，客戶端快取起來，這部分是不會變動的vendor: }}
}
3. 壓縮** compression-webpack-plugin
使用mode=production本身是會壓縮的，但是這個壓縮只是**壓縮，而瀏覽器其實是支援gzip和其他各種格式的壓縮檔案的，我們完全可以給瀏覽器乙個壓縮包的
使用這個外掛程式壓縮成gzip會使得**體積再減小一兩倍之多。用法也很簡單
const compressionwebpackplugin = require('
compression-webpack-plugin
')
config.plugins.push(當然這個玩意前提是要有個伺服器支援的哦newcompressionwebpackplugin()
)
一般的做法是我們請求某個js資源的時候，配置返回為壓縮好的壓縮包而不是js
就介紹這三個啦，如果你的webpack裡還沒有用過這三種優化，那就趕快試試吧。。
入坑 webpack4 0 檔案打包
博主最近入坑 webpack 進行前端檔案的打包，由於前端技術的更新迭代，博主也是遇到了不少坑。接下來這篇部落格是對 webpack 的一些基本的介紹。版本打包命令 3.0 4.0 webpack 打包檔案 輸出檔案 4.0 webpack 打包檔案 o 輸出檔案 下面是乙個 在專案根目錄下的 we...
手寫webpack4 0的配置
webpack詳解 webpack是乙個打包工具，他的宗旨是一切靜態資源即可打包。有人就會問為什麼要webpack？webpack是現代前端技術的基石，常規的開發方式，比如jquery,html,css靜態網頁開發已經落後了。現在是mvvm的時代，資料驅動介面。webpack將現代js開發中的各種新...
webPack 4 0的零基礎學習
webpack 也更新到了4.0階段，今天看了一下官網，總結一下，零基礎的學習路徑吧。npm install webpack webpack cli webpack 初始化 npm init 3 完成之後，則是從零配置webpack 需要在根目錄下，建立乙個webpack.config.js的檔案，...