// app.js
import base from "./css/base.css"

// 給 app 標(biāo)簽再加一個(gè) div 并且類(lèi)名為 box
var app = document.getElementById("app")
var div = document.createElement("div")
div.className = "box"
app.appendChild(div)

最后，為了讓環(huán)境更接近實(shí)際環(huán)境，我們?cè)?index.html 的一個(gè)標(biāo)簽，也引用了定義好的 box-big 樣式類(lèi)。

PurifyCSS將幫助我們進(jìn)行 CSS Tree Shaking 操作。為了能準(zhǔn)確指明要進(jìn)行 Tree Shaking 的 CSS 文件，還有 glob-all （另一個(gè)第三方庫(kù)）。

glob-all 的作用就是幫助 PurifyCSS 進(jìn)行路徑處理，定位要做 Tree Shaking 的路徑文件。

安裝依賴(lài)：

npm i glob-all purify-css purifycss-webpack --save-dev

更改配置文件：

const path = require("path")

const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")

const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 將 css 多帶帶打包成文件

const PurifyCSS = require("purifycss-webpack")
const glob = require("glob-all")

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: "./", // js 引用的路徑或者 CDN 地址
    path: path.resolve(__dirname, "dist"), // 打包文件的輸出目錄
    filename: "[name].bundle.js", // 代碼打包后的文件名
    chunkFilename: "[name].js" // 代碼拆分后的文件名
  },
  module: {
    rules: [
      {
        test: /.css$/, // 針對(duì) .scss 或者 .css 后綴的文件設(shè)置 loader
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 打包輸出HTML
      title: "自動(dòng)生成 HTML",
      minify: {
        // 壓縮 HTML 文件
        removeComments: true, // 移除 HTML 中的注釋
        collapseWhitespace: true, // 刪除空白符與換行符
        minifyCSS: true // 壓縮內(nèi)聯(lián) css
      },
      filename: "index.html", // 生成后的文件名
      template: "index.html", // 根據(jù)此模版生成 HTML 文件
      chunks: ["app"] // entry中的 app 入口才會(huì)被打包
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    // 清除無(wú)用 css
    new PurifyCSS({
      paths: glob.sync([
        // 要做 CSS Tree Shaking 的路徑文件
        path.resolve(__dirname, "./*.html"), // 請(qǐng)注意，我們同樣需要對(duì) html 文件進(jìn)行 tree shaking
        path.resolve(__dirname, "./src/*.js")
      ])
    })
  ]
}

打包完查看 dist/app.css 文件

在 index.html 和 src/app.js 中引用的樣式都被打包了，而沒(méi)有被使用的樣式類(lèi)–box-small，沒(méi)有被打包進(jìn)去

demo11 源碼地址

目錄結(jié)構(gòu):

webpack4 中的圖片常用的基礎(chǔ)操作：

圖片處理和 Base64 編碼

圖片壓縮

合成雪碧圖

如項(xiàng)目代碼目錄展示的那樣，除了常見(jiàn)的 app.js 作為入口文件，我們將用到的 3 張圖片放在 /src/assets/imgs/ 目錄下，并在樣式文件 base.css 中引用這些圖片。

剩下的內(nèi)容交給 webpack 打包處理即可。樣式文件和入口 app.js 文件的代碼分別如下所示：

/* base.css */
*,
body {
  margin: 0;
  padding: 0;
}
.box {
  height: 400px;
  width: 400px;
  border: 5px solid #000;
  color: #000;
}
.box div {
  width: 100px;
  height: 100px;
  float: left;
}
.box .ani1 {
  background: url("./../assets/imgs/1.jpg") no-repeat;
}
.box .ani2 {
  background: url("./../assets/imgs/2.png") no-repeat;
}
.box .ani3 {
  background: url("./../assets/imgs/3.png") no-repeat;
}

在 app.js 中

import "./css/base.css"

安裝依賴(lài)：

npm install url-loader file-loader --save-dev

在 webpack.config.js 中的 module.rules 選項(xiàng)中進(jìn)行配置，以實(shí)現(xiàn)讓 loader 識(shí)別圖片后綴名，并且進(jìn)行指定的處理操作。

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              outputPath: "images/", //輸出到 images 文件夾
              limit: 20000 //把小于 20kb 的文件轉(zhuǎn)成 Base64 的格式
            }
          }
        ]
      }
    ]
  }
}

完整的配置文件

const path = require("path")

const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")

const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 將 css 多帶帶打包成文件

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: "./", // js 引用的路徑或者 CDN 地址
    path: path.resolve(__dirname, "dist"), // 打包文件的輸出目錄
    filename: "[name].bundle.js", // 代碼打包后的文件名
    chunkFilename: "[name].js" // 代碼拆分后的文件名
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader"
        ]
      },
      {
        test: /.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              outputPath: "images/", //輸出到 images 文件夾
              limit: 20000 //把小于 20kb 的文件轉(zhuǎn)成 Base64 的格式
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 打包輸出HTML
      title: "自動(dòng)生成 HTML",
      minify: {
        // 壓縮 HTML 文件
        removeComments: true, // 移除 HTML 中的注釋
        collapseWhitespace: true, // 刪除空白符與換行符
        minifyCSS: true // 壓縮內(nèi)聯(lián) css
      },
      filename: "index.html", // 生成后的文件名
      template: "index.html", // 根據(jù)此模版生成 HTML 文件
      chunks: ["app"] // entry中的 app 入口才會(huì)被打包
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
}

打包項(xiàng)目，查看打包結(jié)果，并在瀏覽器中打開(kāi) index.html 文件

可以看到除了 1.jpg，另外兩張圖片已經(jīng)被打包成 base64 格式，在 app.css 文件中

1.jpg 這個(gè)文件超過(guò)我們?cè)?url-loader 選項(xiàng)中設(shè)置的 limit 值，所以被多帶帶打包

這就是利用了 file-loader 的能力，如果在 url-loader 中設(shè)置了 limit 的值，卻沒(méi)有安裝 file-loader 依賴(lài)，會(huì)怎么樣？來(lái)試試看，首先卸載 file-loader 依賴(lài)，npm uninstall file-loader，再運(yùn)行打包命令，npm run build

如果圖片較多，會(huì)發(fā)很多 http 請(qǐng)求，會(huì)降低頁(yè)面性能。
url-loader 會(huì)將引入的圖片編碼，轉(zhuǎn)為 base64 字符串。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪(fǎng)問(wèn)圖片了，節(jié)省了圖片請(qǐng)求。

但是，如果圖片較大，編碼會(huì)消耗性能。因此 url-loader 提供了一個(gè) limit 參數(shù)，小于 limit 字節(jié)的文件會(huì)被轉(zhuǎn)為 base64，大于 limit 的使用 file-loader 進(jìn)行處理，多帶帶打包。

url-loader 依賴(lài) file-loader，url-loader 可以看作是增強(qiáng)版的 file-loader

圖片壓縮需要使用 img-loader 插件，除此之外，針對(duì)不同的圖片類(lèi)型，還要引用不同的插件。比如，我們項(xiàng)目中使用的是 png 圖片，因此，需要引入 imagemin-pngquant，并且指定壓縮率。壓縮 jpg/jpeg 圖片為 imagemin-mozjpeg 插件

這里有個(gè) bug，可以先不急著操作，先把這一小節(jié)看完，再?zèng)Q定??！

安裝依賴(lài)

npm i img-loader imagemin imagemin-pngquant imagemin-mozjpeg --save-dev

在之前的配置上更改：

{
  test: /.(png|jpg|jpeg|gif)$/,
  use: [
    {
      loader: "url-loader",
      options: {
        name: "[name]-[hash:5].min.[ext]",
        outputPath: "images/", // 輸出到 images 文件夾
        limit: 20000 //把小于 20kb 的文件轉(zhuǎn)成 Base64 的格式
      }
    }
  ]
}

更改為：

{
  test: /.(png|jpg|jpeg|gif)$/,
  use: [
    {
      loader: "url-loader",
      options: {
        name: "[name]-[hash:5].min.[ext]",
        limit: 1000, // size <= 1KB
        outputPath: "images/"
      }
    },
    // img-loader for zip img
    {
      loader: "img-loader",
      options: {
        plugins: [
          require("imagemin-pngquant")({
            quality: "80" // the quality of zip
          }),
          require("imagemin-mozjpeg")({
            quality: "80"
          })
        ]
      }
    }
  ]
}

打包結(jié)果：

原因在 png 圖片上，jpg 圖片可以壓縮，但是去 imagemin-pngquant github 上也沒(méi)發(fā)現(xiàn)有人提出類(lèi)似 issue ，百度、google 找了半天，還是沒(méi)發(fā)現(xiàn)怎么解決