【前端】Webpack5中Html和CSS的压缩打包

1.Webpack5简介

1.1.Webpack简介

（1）webpack的发展历程

2012.3---webpack（问世）
2014.2---webpack1
2016.12---webpack2
2017.6---webpack3
2018.2---webpack4
2020.10---webpack5（要求node版本10.13+）

（2）什么是webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具
静态模块
- 模块化开发，避免重复代码、逻辑，提高开发效率
打包
- 将各个模块，按照一定的规则组装起来

将多个不同类型文件打包
编译代码，确保浏览器能解析
对代码进行压缩，减少文件体积，提高加载速度
对源代码进行格式化校验
有热更新功能，提高开发效率
不同环境，提供不同的打包策略

1.2.Webpack五个核心配置

（1）入口（entry）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph)的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。

（2）输出（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundle ，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

（3）加载器（Loader）

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

bash 复制代码

webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

在更高层面，在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

（4）插件（plugin）

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

（5）模式（mode）

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

1.3.webpack初体验

（1）初始化项目

js 复制代码

cnpm init -y

（2）安装webpack

js 复制代码

cnpm i webpack webpack-cli -D

（3）创建入口文件

js 复制代码

console.log('hello webpack');

（4）打包，指定mode

js 复制代码

webpack ./js/index.js -o ./dist --mode=development

2.HTML、CSS资源打包

2.1.理解webpack配置文件

（1）webpack配置文件的作用

简化命令行的选项
默认配置文件名称为webpack.config.js
操作webpack大部分都是在配置webpack.config.js文件

（2）配置详情

mode（模式）

js 复制代码

// 打包模式配置
mode: 'development',

entry（入口）

js 复制代码

// 入口文件配置
entry: './src/index.js',

output（出口）

js 复制代码

const { resolve } = require('path');

// 出口文件配置
output: {
  // 所有输出文件的目标路径，必须是绝对路径
  path: path.resolve(__dirname, 'dist'),
  // 出口文件名配置
  filename: "bundle.js",
},

module（模块-loader配置）

js 复制代码

// 模块配置
module: {
  rules: [
    // 配置多个模块规则（配置loader、解析器等选项）
  ],
},

devServer（用于快速开发应用程序）

js 复制代码

// 开发服务器
devServer: {},

plugin（插件）

js 复制代码

// 插件配置
plugins: [],

创建webpack.config.js配置文件

js 复制代码

const { resolve } = require("path");

module.exports = {
  // 打包模式配置
  mode: "development",
  // 入口文件配置
  entry: "./js/index.js",

  // 出口文件配置
  output: {
    // 所有输出文件的目标路径，必须是绝对路径
    path:resolve(__dirname, "dist"),
    // 出口文件名配置
    filename: "main.js",
  },
  // 模块配置
  module: {
    rules: [
      // 配置多个模块规则（配置loader、解析器等选项）
    ],
  },
  // 开发服务器
  devServer: {},
  // 插件配置
  plugins: [],
};

执行命令

js 复制代码

npm run build

2.2.自动生成HTML文件和指定模板

自动生成HTML文件（html-webpack-plugin）,该插件可以生成一个 HTML 文件，并在HTML中加载所有打包资源，便于服务器访问。

（1）安装

js 复制代码

cnpm i html-webpack-plugin -D

（2）在webpack.config.js中引入插件

js 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin')

（3）webpack.config.js配置plugins

js 复制代码

plugins: [
  new HtmlWebpackPlugin(),
],

执行 npm run build

指定生成HTML模板

（1）新建HTML文件

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    
</body>
</html>

注意title这块要用EJS语法，是JS的模板引擎。

（2）配置plugins

js 复制代码

plugins: [
  new HtmlWebpackPlugin({
		template:'./html/index.html',  //指定 html 模板
    filename:'index.html',				//指定 html 名称
    title:'hello webpack'					//指定 html title
  }),
],

执行 npm run build

2.3.打包多个HTML页面和压缩

（1）打包多个HTML页面

js 复制代码

plugins: [
  new HtmlWebpackPlugin({
		template:'./html/index.html',  
    filename:'one.html',				
    title:'第一个'					
  }),
  new HtmlWebpackPlugin({
		template:'./html/index.html',  
    filename:'two.html',				
    title:'第二个'					
  }),
],

（2）压缩html

js 复制代码

  plugins: [
    new HtmlWebpackPlugin({
      template:'./html/index.html',  
      filename:'index.html',				
      title:'index',
      minify: {
        collapseWhitespace: true,  // 清除空格换行
        removeComments: true,			 // 清除注释
      }, 				
    })
  ],

2.4.CSS文件打包原理

打包css文件需要两个loader：

css-loader
- 将css代码转化为js代码，合并到打包后的js文件中。
style-loader
- 将包含css内容的js代码，插入到html中style标签中。

（1）安装css-loader和style-loader

js 复制代码

cnpm i css-loader style-loader -D

（2）将创建的css文件引入到js文件中

创建css文件

css 复制代码

.d1{
    background-color: cadetblue;
}

//html 中 加入一个div元素
    <div class="d1">
        我是李祥
    </div>

js 复制代码

import './css/main.css'
console.log('hello webpack');

（3）webpack.config.js配置module

js 复制代码

// 模块配置
module: {
  rules: [
    // 配置多个模块规则（配置loader、解析器等选项）
    {
      // 匹配css文件
      test: /\.css$/i,
      // 指定加载器，加载顺序是从左到右或者是从下到上
      use: ['style-loader', 'css-loader'],
    },
  ],
},

2.5.将CSS代码抽离成单独文件

CSS代码抽离成单独文件的作用：

从js文件中抽离出css代码，减少js文件体积
当js文件比较庞大时，可以避免阻碍页面的渲染
提高渲染速度

将CSS代码抽离成单独文件的插件mini-css-extract-plugin

（1）安装mini-css-extract-plugin

js 复制代码

cnpm i mini-css-extract-plugin -D

（2）webpack.config.js引入

js 复制代码

const MiniCssExtractPlugin=require('mini-css-extract-plugin')

（3）loader配置（替换style-loader）

js 复制代码

use:[MiniCssExtractPlugin.loader,'css-loader']

（4）实例化插件

js 复制代码

new MiniCssExtractPlugin({
  filename:'./css/main.css'
})

2.6.打包CSS预编译语言

（1）安装css预编译语言插件

less

js 复制代码

cnpm install less less-loader -D

sass

js 复制代码

cnpm install node-sass sass-loader -D

stylus

js 复制代码

cnpm install stylus stylus-loader -D

（2）同样js引入less文件，webpack配置文件中配置规则

js 复制代码

 // 模块配置
module: {
  rules: [
    {
      test: /\.less$/i,
      use: ['style-loader', 'css-loader', 'less-loader'],
    },
  ],
},

2.7.CSS样式添加兼容前缀

（1）安装插件

bash 复制代码

cnpm i postcss-loader autoprefixer -D

（2）配置

webpack.config.js

js 复制代码

use: [
  MiniCssExtractPlugin.loader, 
  'css-loader',
  'postcss-loader'   // 处理css兼容
]

postcss.config.js

js 复制代码

module.exports = {
  plugins: [require('autoprefixer')], // 添加浏览器前缀
};

package.json

js 复制代码

"browserslist":[
  "last 2 version",   // 兼容浏览器的最近两个版本
  "> 1%"							// 全球占有率超过1%的浏览器
]

作用：让特殊的css样式兼容各个浏览器