jscss壓縮webpack（JS 壓縮）

本文目錄一覽：

• 1、webpack和gulp的區別
• 2、vue.config.js中的webpack配置，優化及多頁面應用開發
• 3、Vue項目打包後js文件壓縮
• 4、webpack 如何配置 CSS抽取 和 打包壓縮

webpack和gulp的區別

gulp是工具鏈、構建工具，可以配合各種插件做js壓縮，css壓縮，less編譯 替代手工實現自動化工作

1.構建工具

2.自動化

3.提高效率用

webpack是文件打包工具，可以把項目的各種js文、css文件等打包合併成一個或多個文件，主要用於模塊化方案，預編譯模塊的方案

1.打包工具

2.模塊化識別

3.編譯模塊代碼方案用

所以定義和用法上來說 都不是一種東西，無可比性 ，更不衝突！【當然，也有相似的功能，比如合併，區分，但各有各的優勢】

vue.config.js中的webpack配置，優化及多頁面應用開發

目錄

官方文檔

vue-cli3以下版本中，關於webpack的一些配置都在config目錄文件中，可是vue-cli3以上版本中，沒有了config目錄，那該怎麼配置webpack呢？

3.x初始化項目後沒有了build和config文件，如果你想對webpack相關內容進行配置，需要自己在根目錄下(與package.json同級)創建一個vue.config.js文件，這個文件一旦存在，那麼它會被 @vue/cli-service 自動載入。(但需要我們自己手動創建哦vue.config.js，跟package.json同級)

在配置中絕大多數都是（可選項）

常規操作還是用到了commjs語法

部署應用包的基本Url，默認/, 可以設置為相對路徑./,這樣打出來的包，可以部署到任意路徑上

輸出文件目錄（打包後生成的目錄，默認dist）

打包後生成的靜態資源目錄，默認「 」 ，也就是我們打包後的css，js等存放的位置

是否在保存的時候檢查

生產環境的 source map，可以將其設置為 false 以加速生產環境構建，默認值是true

可通過 devServer.proxy解決前後端跨域問題（反向代理）

擴展： hot 和 hotOnly 的區別是在某些模塊不支持熱更新的情況下，前者會自動刷新頁面，後者不會刷新頁面，而是在控制台輸出熱更新失敗

擴展：

Preload： 用於標記頁面載入後即將用到的資源，瀏覽器將在主體渲染前載入preload標記文件。Vue CLI 應用會為所有初始化渲染需要的文件自動生成 preload 提示；

Prefetch: 用於標記瀏覽器在頁面載入完成後，利用空閑時間預載入的內容。Vue CLI 應用默認為所有作為 async chunk 生成的 JavaScript 文件 (通過動態 import() 按需 code splitting 的產物) 自動生成prefetch提示。

webpack配置

擴展:

在這裡configureWebpack和chainWebpack的作用相同，唯一的區別就是他們修改webpack配置的方式不同：

這裡配置了全局sass 需要安裝的依賴 sass-loader less-loader

由於 sass-loader 版本不同，loaderOptions 中的 additionalData 的鍵名也不同

vue-cli3中的webpack與vue多頁面應用開發

相關參數:

封裝

很好的pwa插件相關配置

pwa介紹及使用

當運行項目並且打包的時候，會發現chunk-vendors.js這個文件非常大，那是因為webpack將所有的依賴全都壓縮到了這個文件裡面，這時我們可以將其拆分，將所有的依賴都打包成單獨的js;

上面已經提到過去掉列印的操作（console、debug）這裡詳細講解一下

新版uglifyjs-webpack-plugin需寫成以下方式

gizp壓縮是一種http請求優化方式，通過減少文件體積來提高載入速度。html、js、css文件甚至json數據都可以用它壓縮，可以減小60%以上的體積。webpack在打包時可以藉助 compression webpack plugin 實現gzip壓縮。

和我們正常創建項目相同，這裡通過vue-cli3腳手架進行創建

Vue項目打包後js文件壓縮

這段時間因為免費試用了 一台阿里雲的伺服器，配置是 2核4G 2M，

因為帶寬太低了，每次在第一次載入的時候太慢了，通過F12調試，發現主要是因為載入的 js 過大而引起的。因此本文將主要講解Vue項目打包後js、css、svg等文件過大的解決辦法。

通過引入 compression-webpack-plugin 插件來打包，然後開啟 nginx gzip 來解決問題

配置 compression-webpack-plugin 前後打包對比，我們查看 dist目錄，能夠發現大於10KB的 js ， css 等文件已經被壓縮了

webpack 如何配置 CSS抽取 和 打包壓縮

我們一般打包， webpack 會自動把 css 打包到 js 文件中去。 css 抽取 就是是把 css 抽取出來，生成 css 文件單獨打包，然後在進行壓縮。

接下來，我詳細介紹下 css 是如何抽取 和 壓縮的！