webpack.config.js====圖片處理

更多內容已經遷移至掘金，歡迎來指導學習：

https://juejin.im/post/5d64ce915188250a985809b0

 

 

1. 安裝依賴：

cnpm install --save-dev url-loader image-webpack-loader html-loader

2. webpack.config.js規則的配置

 /* * url-loader：主要是圖片處理和Base64編碼（base64就是一串加密的字符串，並且base64編碼過的圖片是沒有http請求的） * image-webpack-loader：主要是壓縮圖片 * */ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: "url-loader", options: {  name: "[name]-[hash:5].min.[ext]", limit: 8192, // size <= 8KB 　　　　　　　　 publicPath: "../images", outputPath: "./images" } }, { loader: 'image-webpack-loader', options: { bypassOnDebug: true } } ] }, //主要是處理html中的img標籤的loader  { test: /\.html$/, use: [{  loader: 'html-loader', options: { minimize: true } }], }

3. 相關css文件和html文件

 

4. 合成雪碧圖：雪碧圖是爲了減小網絡請求，因此被處理雪碧圖的圖片多爲各式各樣的 logo 或者大小相等的小圖片。而對於大圖片，仍是不推薦使用雪碧圖。

　　4.1 安裝依賴

//postcss-loader和postcss-sprites則用來合成雪碧圖，減小網絡請求 cnpm install --save-dev postcss-loader postcss-sprites

　　4.2 配置webpack.config.js文件

//配置雪碧圖 let spritesConfig = {  spritePath: "./dist/images" };

結合postcss-loader配置postcss-sprites

 // 編譯css scss sass文件  { test: /\.(sa|sc|c)ss$/, /* * 從右向左編譯 * style-loader:將 JS 字符串生成爲 style 節點 * css-loader:將 CSS 轉化成 CommonJS 模塊 * sass-loader:// 將 Sass 編譯成 CSS * use: ['style-loader', 'css-loader', "postcss-loader", 'sass-loader'] * */ use: [ { loader: "style-loader", options: { singleton: false // 處理爲單個style標籤  } }, { loader: "css-loader" }, { loader: 'postcss-loader', //postcss-sprites須要結合postcss-loader合成雪碧圖  options: { ident: "postcss", plugins: [require("postcss-sprites")(spritesConfig)] } }, { loader: 'sass-loader' } ] }, // 文本分離：配置scss  { test: /\.scss$/, use: extractTextWebpackPlugin.extract({ fallback: 'style-loader', use: [ {loader: 'css-loader'}, { loader: 'postcss-loader', //postcss-sprites須要結合postcss-loader合成雪碧區、圖  options: { ident: "postcss", plugins: [require("postcss-sprites")(spritesConfig)] } }, {loader: 'sass-loader'} ] }) },

在編譯完成之後，會自動在css文件裏面處理background-size和background-position，完美的顯示圖片