本人微信公衆號: 前端修煉之路,歡迎關注。
前幾天朋友聚餐忽然想到,再過不到半年時間,第一批20後即將出生。這種感受就像是,如今的90後看60後~ 一不當心咱們這些90後在20後的眼中就變成了上個世紀的人。o(╯□╰)ocss
回顧webpack這個系列,結合本身使用的一個過程,是時候結束一下了。html
我在項目中發現,有些時候css會有重複,或者不知道誰寫的根本就沒有使用過的css樣式。若是文件較小,影響不是很大。可是我有一個項目,發現其中的css有9000多行!前端
對於有代碼潔癖的我來講,這是不能忍受的~要是文件小的話,我還有機會能夠一行行的查找,將多餘的代碼刪除。惋惜這個文件內容過多。好在找到了一個webpack
插件mini-css-extract-plugin
,這個插件結合purifycss-webpack
使用,就能夠知足個人需求,將功能交給webpack
去作。webpack
mini-css-extract-plugin
這個插件能夠在webpack plugins中查看更多配置選項。這裏我先只使用最簡單的配置項。web
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); plugins: [ new MiniCssExtractPlugin({ // css文件抽離 filename: 'css/[name].min.css', // 指定抽離以後文件的名字和而且在css路徑之下 chunkFilename: 'css/[id].min.css', }), ], module: { rules: [ { test: /\.css$/, // 由於我項目中只有css代碼,因此正則只寫css use: [ { loader: MiniCssExtractPlugin.loader, // 指定使用mimi-css-extract-plugin options: { publicPath: '../', hmr: process.env.NODE_ENV === 'development', // 只在開發環境下開啓hmr }, }, 'css-loader', // 使用css-loader ], } ] }
purifycss-webpack
這個插件能夠去npm 官網查看更多配置項。npm
注:若是打開purifycss-webpack
這個插件的npm說明,頁面中會提示使用extract-text-webpack-plugin
這個插件,而且示例代碼也是用這個插件演示的。但其實這個插件已經廢棄了。官網推薦的使用就是上面使用的mini-css-extract-plugin
這個插件。
const glob = require('glob'); // 這裏必定要安裝glob-all這個插件而不是glob const PurifyCSSPlugin = require('purifycss-webpack'); new PurifyCSSPlugin({ // css 文件去重 paths: glob.sync(path.join(__dirname, 'index.html')) // 指定html頁面,也可使用通配符*進行匹配所有html })
purifycss-webpack
和mini-css-extract-plugin
二者結合使用,才能實現將css去重。segmentfault
去重實現之後,文件縮減了很多,但是我還不知足。由於我想在線上使用壓縮的css,進一步縮小文件的大小,節省用戶流量。若是自習閱讀剛纔文檔,會發現MiniCssExtractPlugin
這個插件之中有提到生成環境下使用壓縮css和js的插件。微信
因此我就直接使用就行了。svg
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const TerserJSPlugin = require('terser-webpack-plugin'); optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], // js壓縮和css 壓縮 }
css提取去重、css壓縮完成以後,又發現能夠進一步優化的地方。網站中通常都會使用一些小圖標和logo,有些小圖標會作成雪碧圖,有些並不會。後來經過搜索,發現其實能夠將一些足夠小的小圖標製做成base64
,將小圖標寫到css文件中,從而減小http請求數量。若是手動去作這個過程,是比較繁瑣的。還好找到了url-loader
這個插件。插件詳細配置能夠看webpack Loaders工具
module: { rules: [ { test: /\.(png|jpe?g|gif|svg)$/i, // 匹配的圖片文件類型 use: [ { loader: 'url-loader', options: { limit: 1024, // 將1024如下的圖片製做成base64圖片,超過的不處理 name: '[name].[ext]', outputPath: 'img/', publicPath: '../img/' // 指定這個地址以後,css中的background纔會變成了base64~,而且路徑使用的是這個路徑 }, } ] } ] }
須要說明的是,我修改瞭如下正則/\.(png|jpe?g|gif|svg)$/i
,這樣jpg
和jpeg
就都能匹配到了。另外須要指定limit
這個參數,表示在limit
配置的數值如下的圖片才進行base64
編碼,超過的不進行處理。
在這個過程當中,遇到的問題就是,若是圖片沒有base64
,就會形成背景圖片background
中引用的url
地址不正確,致使圖片引用失敗。後來通過調試發現,指定options.publicPath
這個屬性,就能夠正確引用了。
處理完小圖標,我想到須要處理一下大圖片。由於若是僅僅處理了小圖標,影響彷佛並不大。真正佔流量的實際上是圖片。其實在作項目的時候,會將png圖片進行一遍壓縮。可是我以前是使用的在線工具。如今我想使用打包工具,自動化進行處理。
image-webpack-loader
能夠壓縮png、jpeg、gif、webp、svg
。能夠分別指定不一樣類型圖片的壓縮質量。
{ loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, // optipng.enabled: false will disable optipng optipng: { enabled: false, }, pngquant: { quality: '65-90', speed: 4 }, gifsicle: { interlaced: false, }, // the webp option will enable WEBP webp: { quality: 75 } } }
使用完這個插件以後,確實發現個人圖片縮小了很多。
上面只是簡單的羅列出來了須要使用的各個loader
和plugin
。可是整個配置並不完整,完整的webpack-config.js
代碼以下:
const path = require('path'); const glob = require('glob'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const TerserJSPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const PurifyCSSPlugin = require('purifycss-webpack'); module.exports = { mode: 'production', entry: { style: './js/style.js', }, optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], // css 壓縮 }, plugins: [ new CleanWebpackPlugin(), // 文件清空 new MiniCssExtractPlugin({ // css文件抽離 filename: 'css/[name].min.css', chunkFilename: 'css/[id].min.css', }), new PurifyCSSPlugin({ // css 文件去重 paths: glob.sync(path.join(__dirname, 'index.html')), }) ], module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../', hmr: process.env.NODE_ENV === 'development', }, }, 'css-loader', ], }, { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name].[ext]', outputPath: 'img/', publicPath: '../img/' // 指定這個地址以後,css中的background纔會變成了base64~,而且路徑使用的是這個路徑 }, }, { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, // optipng.enabled: false will disable optipng optipng: { enabled: false, }, pngquant: { quality: '65-90', speed: 4 }, gifsicle: { interlaced: false, }, // the webp option will enable WEBP webp: { quality: 75 } } } ], } ], }, output: { filename: '[name].min.js', path: path.resolve(__dirname, './dist') } };
entry
入口是style.js
。output.path
指定的,輸出到了dist
目錄下。loader
時,能夠在一個正則匹配下,配置多個loader
。例如我先配置了url-loader
,而後配置了image-webpack-loader
。在入口文件style.js
中,其實什麼事情也沒有作,只是引入了須要使用的css
文件。代碼以下:
import style from '../css/style.css';
因此過程就是style.js
引入了style.css
,而後webpack
進行打包處理,生成style.min.js
和style.min.css
。
整個的項目結構以下:
以上就是我在項目中使用webpack
的一個狀況。目前這個入門學習手記到這裏就結束了。
(完)
相關文章