24 个实例入门并掌握「Webpack4」(二)

// 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 找了半天，还是没发现怎么解决