webpack入門學習手記（五）
本人微信公衆號： 前端修煉之路，歡迎關注。
前幾天朋友聚餐忽然想到，再過不到半年時間，第一批20後即將出生。這種感受就像是，如今的90後看60後~ 一不當心咱們這些90後在20後的眼中就變成了上個世紀的人。o(╯□╰)ocss
回顧webpack這個系列，結合本身使用的一個過程，是時候結束一下了。html
css優化
我在項目中發現，有些時候css會有重複，或者不知道誰寫的根本就沒有使用過的css樣式。若是文件較小，影響不是很大。可是我有一個項目，發現其中的css有9000多行！前端
對於有代碼潔癖的我來講，這是不能忍受的~要是文件小的話，我還有機會能夠一行行的查找，將多餘的代碼刪除。惋惜這個文件內容過多。好在找到了一個webpack插件mini-css-extract-plugin，這個插件結合purifycss-webpack使用，就能夠知足個人需求，將功能交給webpack去作。webpack
mini-css-extract-plugin
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
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
optimize-css-assets-webpack-plugin
去重實現之後，文件縮減了很多，但是我還不知足。由於我想在線上使用壓縮的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 壓縮
}
圖片優化
url-loader
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這個屬性，就能夠正確引用了。
image-webpack-loader
處理完小圖標，我想到須要處理一下大圖片。由於若是僅僅處理了小圖標，影響彷佛並不大。真正佔流量的實際上是圖片。其實在作項目的時候，會將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的一個狀況。目前這個入門學習手記到這裏就結束了。
（完）
相關文章
- 1. webpack入門學習手記（五）
- 2. webpack入門學習手記（四）
- 3. webpack入門學習手記（三）
- 4. webpack入門學習手記（二）
- 5. webpack入門學習手記（一）
- 6. 學習筆記-Webpack入門
- 7. 入門學習webpack筆記
- 8. 學習筆記-webpack 入門
- 9. webpack學習入門
- 10. webpack入門學習
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • YAML 入門教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
- 1. webpack入門學習手記（五）
- 2. webpack入門學習手記（四）
- 3. webpack入門學習手記（三）
- 4. webpack入門學習手記（二）
- 5. webpack入門學習手記（一）
- 6. 學習筆記-Webpack入門
- 7. 入門學習webpack筆記
- 8. 學習筆記-webpack 入門
- 9. webpack學習入門
- 10. webpack入門學習