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

// 給 app 標簽再加一個 div 并且類名為 box
var app = document.getElementById("app")
var div = document.createElement("div")
div.className = "box"
app.appendChild(div)

最后，為了讓環境更接近實際環境，我們在 index.html 的一個標簽，也引用了定義好的 box-big 樣式類。

PurifyCSS將幫助我們進行 CSS Tree Shaking 操作。為了能準確指明要進行 Tree Shaking 的 CSS 文件，還有 glob-all （另一個第三方庫）。

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

安裝依賴：

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$/, // 針對 .scss 或者 .css 后綴的文件設置 loader
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 打包輸出HTML
      title: "自動生成 HTML",
      minify: {
        // 壓縮 HTML 文件
        removeComments: true, // 移除 HTML 中的注釋
        collapseWhitespace: true, // 刪除空白符與換行符
        minifyCSS: true // 壓縮內聯 css
      },
      filename: "index.html", // 生成后的文件名
      template: "index.html", // 根據此模版生成 HTML 文件
      chunks: ["app"] // entry中的 app 入口才會被打包
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    // 清除無用 css
    new PurifyCSS({
      paths: glob.sync([
        // 要做 CSS Tree Shaking 的路徑文件
        path.resolve(__dirname, "./*.html"), // 請注意，我們同樣需要對 html 文件進行 tree shaking
        path.resolve(__dirname, "./src/*.js")
      ])
    })
  ]
}

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

在 index.html 和 src/app.js 中引用的樣式都被打包了，而沒有被使用的樣式類–box-small，沒有被打包進去

demo11 源碼地址

目錄結構:

webpack4 中的圖片常用的基礎操作：

圖片處理和 Base64 編碼

圖片壓縮

合成雪碧圖

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

剩下的內容交給 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"

安裝依賴：

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

在 webpack.config.js 中的 module.rules 選項中進行配置，以實現讓 loader 識別圖片后綴名，并且進行指定的處理操作。

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 的文件轉成 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 的文件轉成 Base64 的格式
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 打包輸出HTML
      title: "自動生成 HTML",
      minify: {
        // 壓縮 HTML 文件
        removeComments: true, // 移除 HTML 中的注釋
        collapseWhitespace: true, // 刪除空白符與換行符
        minifyCSS: true // 壓縮內聯 css
      },
      filename: "index.html", // 生成后的文件名
      template: "index.html", // 根據此模版生成 HTML 文件
      chunks: ["app"] // entry中的 app 入口才會被打包
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
}

打包項目，查看打包結果，并在瀏覽器中打開 index.html 文件

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

1.jpg 這個文件超過我們在 url-loader 選項中設置的 limit 值，所以被多帶帶打包

這就是利用了 file-loader 的能力，如果在 url-loader 中設置了 limit 的值，卻沒有安裝 file-loader 依賴，會怎么樣？來試試看，首先卸載 file-loader 依賴，npm uninstall file-loader，再運行打包命令，npm run build

如果圖片較多，會發很多 http 請求，會降低頁面性能。
url-loader 會將引入的圖片編碼，轉為 base64 字符串。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了，節省了圖片請求。

但是，如果圖片較大，編碼會消耗性能。因此 url-loader 提供了一個 limit 參數，小于 limit 字節的文件會被轉為 base64，大于 limit 的使用 file-loader 進行處理，多帶帶打包。

url-loader 依賴 file-loader，url-loader 可以看作是增強版的 file-loader

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

這里有個 bug，可以先不急著操作，先把這一小節看完，再決定！！

安裝依賴

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 的文件轉成 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"
          })
        ]
      }
    }
  ]
}

打包結果：

原因在 png 圖片上，jpg 圖片可以壓縮，但是去 imagemin-pngquant github 上也沒發現有人提出類似 issue ，百度、google 找了半天，還是沒發現怎么解決