webpack5 实战应用

高洛峰
学习目录和学习基础
课程目标：
可以使用 webpack 搭建开发环境
可以使用 webpack 打包优化项目

需要基础
有 NPM 的使用基础
ES6 基本语法有所了解
需要 NODE 一点点应用
课程大纲
初识 webpack5 » devServer 配置与应用
webpack 安装和基本体验 » 配置可用的基本开发环境
webpack 的五个核心概念
» 开发环境优化
打包样式资源
打包 HTML 资源 » 生产环境优化
打包图片资源 » webpack 配置文件内容详解
打包基他资源 » 配置标准的开发和生产环境案例
» 配置 jQuery+BootStrap 的开发环
境
认识 webpack5
webpack 是一个模块打包器 ( 构建工具 ) 。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器
中使用，但它也能够胜任转换（ transform ）、打包（ bundle ）或包裹（ package ）任何资源 (resource or asset) 。
官网： https://webpack.js.org/ 中文文档： https://webpack.docschina.org/
了解 webpack 原理和概念
树结构 : 在一个入口文件中引入所有资源，形成所有依赖关系树状图
模块：模块就是模块可以是 ES6 模块也可以是 commonJS 或者 AMD 模块，对于 webpack 来说，所有的资源（ css,img... ）
chunk ：打包过程中被操作的模块文件叫做 chunk, 例如异步加载一个模块就是一个 chunk
bundel ： bundle 是最后打包后的文件 , 最终文件可以和 chunk 长的一模一样 , 但是大部分情况下他是多个 chunk 的集合

为了优化最后生产出的 bundle 数量可能不等于 chunk 的数量，因为有可能多个 chunk 被组合到了一个 Bundle 中。

 webpack 安装和体验
1 、创建项目目录： webpack-demo
2 、进入目录初始化 NPM 操作： npm init -y (-y = -yes, i=install)
3 、安装 webpack 及 webpack-cli ： npm install webpack webpack-cli --D (-D = --save-dev)
4 、创建 src 目录或根据需要创建下面的子目录 --->

5 、在 src 下创建一些 js 文件 , 和一个主入口文件 index.js -- >

6 、控制台运行命令： webpack --mode development （开发环境）
控制台运行命令： webpack --mode production （生产环境）
7 、可以使用 node 运行打包后的资源， 也可以使用 HTML 引入打包后的资源
webpack 的 5 个核心概念
1 、 entry
入口（ entry ）指示 webpack 以哪个文件作为入口起点开始打包，分析构建内部依赖图。
2 、 output
输出（ output ）指示 webpack 打包后的资源 bundles 输出到哪里，以及如何命名。
3 、 loader
loader 让 webpack 能够去处理那些非 JavaScript 资源 css 、 img 等，将它们处理成 webpack 能够识别的资源，可以理
解成一个翻译过程（ webpack 自身只能理解 js 和 json ）。
4 、 plugins
插件（ plugins ）可用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5 、 mode
模式（ mode ）指示 webpack 使用相应模式的配置。
开发模式（ development ）：配置比较简单，能让代码本地调试运行的环境。
生产模式（ production ）：代码需要不断优化达到性能最好。能让代码优化上线运行的环境。
都会自动启用一些插件，生产模式使用插件更多
webpack.config.js 核心配置项
// resolve 用来拼接绝对路径的方法 ,NODE 的方法
const {resolve} = require('path');

module.exports = {
// webpack 配置

/* 入口文件 */
webpack 配置文件 webpack.config.js entry: './src/main.js',
作用： 指示 webpack 干那些活，当运行 webpack 指令
/* 输出 */
时会加载其中配置 output: {
构建工具 (webpack.config.js) 基于 nodejs 平台运行的，模 /* 输出文件名 */
filename: "build.js",
块化默认采用 commonjs ，而项目文件（ src 内文件）采 /* 输出路径 一般采用绝对路径 */
用的是 ES6 语法 path: resolve(__dirname, 'build')
},

开发环境： webpack ./src/index.js -o ./build/build.js --mode /* loader 配置 */

module: {
development rules: [

]
生产环境： webpack ./src/index.js -o ./build/build.js --mode },
production
/* plugins 配置 */
plugins: [

],

/* 模式 */
mode: "development" // development || production
}
多个入口和多个出口的情况 -- 入口文件
// 1. String ：单入口， 打包成一个 chunk, 输出一个 bundle 文件， chunk 的名称为默认。
entry:'./src/index.js',
// 2. Array ： 多入口， 写多个入口，所有入口文件形成一个 chunk( 名称默认 ), 输出只有一个 bundle, chunk 名称默认
entry: ["./src/two.js",'./src/index.js'],
// 3. Object: 多入口， 有几个入口文件就生成几个 chunk ， 并输出几个 bundle 文件， chunk 的名称是 key
entry: {
two: "./src/two.js",
index:'./src/index.js'
},
// 4. 特殊用法：
entry: {
// 数组中所有入口文件生成一个 chunk, 输出一个 bundle 文件， chunk 的名称是 key
onetwo: ["./src/one.js","./src/two.js"],
// 形成一个 chunk, 输出一个 bundle 文件
index:'./src/index.js'
},
webpack 打包 html 资源
使用插件 (plugins) 对 HTML 文件进行处理（ html-webpack-plugin ）
使用步骤： 1. 下载 2. 引入 3. 使用
下载安装： npm i html-webpack-plugin -D
引入插件： const HtmlWebpackPlugin = require('html-webpack-plugin');
使用插件：
plugins: [
// 功能：默认会创建一个空的 HTML 文件，自动引入打包输出的所有资源（ JS/CSS ）
// new HtmlWebpackPlugin()

// 通过参数可以输出有结构的 HTML 资源
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件， 并自动引入打包输出的所有资源（ JS/CSS ）
html-webpack-plugin 插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的资源（
template: "./src/index.html", JS/CSS ）
// 默认是 index.html 名称，通过 filename 设置输出文件名称
// filename: "demo.html"
})
],
压缩 JS 和 HTML 代码
JS 代码只需设置成生产模式（ production ）模式，会自动压缩
压缩 HTML 方法：

// 通过参数可以输出有结构的 HTML 资源
new HtmlWebpackPlugin({
// 复制 './src/demo.html' 文件， 并自动引入打包输出的所有资源（ JS/CSS ）
template: "./src/demo.html",
filename: "demo.html",

// 压缩 html 代码
minify: {
// 移除空格
collapseWhitespace:true,
// 移除注释
removeComments:true
}
})
webpack 打包多 html 开发案例
多 html 的规律是需要有多个 entry ，每个 html 一个 entry ，同时需要新建多个
HtmlWebpackPlugin
// 负责打包 html 文件 将 js 注入到 html 中， minify 压缩
html
// 多个 entry new HtmlWebpackPlugin({
filename: "index.html",
entry: {
template: "./src/index.html",
vendor: ['jquery','./src/js/common.js'], chunks: ["index","vendor"],
index: "./src/js/index.js", minify:{
cart: "./src/js/cart.js" removeComment:true,
}, collapseWhitespace:true
}
}),

new HtmlWebpackPlugin({
filename: "cart.html",
template: "./src/cart.html",
chunks: ["cart","vendor"]
}),
webpack 打包 CSS 资源
需要使用 npm 下载安装两个 loader 帮我们完成打包
1. css-loader 的作用是处理 css 中的 @import 和 url 这样的外部资源
2. style-loader 的作用是把样式插入到 DOM 中，方法是在 head 中插入一个 style 标签，并把样式写入到这个标
签的 innerHTML 里

# npm i css-loader style-loader -D

# webpack
webpack 打包 less 或 sass 资
源
因为 css 只是单纯的属性描述，它并不具有变量、条件语句等， css 的特性导致了它难组织和维护。
Sass 和 Less 都属于 CSS 预处理器，定义了一种新的语言，其基本思想是用一种专门的编程语言，为
CSS 增加一些编程的特性，将 CSS 作为目标生成文件，然后开发者使用这种语言进行 CSS 编码工作 .
Less 需要使用 npm 下载 less 包和 less-loader
Sass 需要使用 npm 下载 node-sass 包和 sass-loader
提取 CSS 为单独文件
css 内容是打包在 js 文件中的， 可以使用” mini-css-extract-plugin” 插件提取成单独的 CSS 文件。
1. 在 webpack.config.js 中引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2. 在 plugins 模块中使用插件
plugins: [ new MiniCssExtractPlugin() ],
或通过参数 filename 重新命名提职的 css 文件名
new MiniCssExtractPlugin({ filename:'./css/demo.css' })
3. 在 CSS 的 rules 中，使用 MiniCssExtractPlugin.loader 取代 style-loader, 提取 js 中 Css 内容为单文件
{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader'] }
如果 sass 和 less 也提取成单独 css 文件，也一样将 style-loader 换成 MiniCssExtractPlugin.loader
{ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }
处理 CSS 的兼容性
需要使 postcss 处理， 下载两个包 post-loader 和 postcss-preset-env
npm i postcss-loader postcss-preset-env -D
postcss 会找到 package.json 中的 browserslist 里面的配置，通过配置加载 css 的兼容性
修改 loader 的配置， 新版需要写 postcss.config.js, less 和 sass 兼容性同理
压缩 CSS
使用 optimize-css-assets-webpack-plugin 插件压缩 CSS 内容
1. 引入插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
2. 使用插件
plugins: [ new OptimizeCssAssetsWebpackPlugin() ],
webpack 打包图片资源
需下载 url-loader 和 file-loader 两个包， 依赖关系
在 css 中引入图片

在 HTML 中使用图片 需要下载 html-loader 来处理图片

webpack 打包其他资源
不需要优化和压缩处理，直接输出的资源，称为其他资源。
对 js 语法配置语法检查
eslint
eslint 是一个开源的 js 代码检查工具，初衷是为了让程序员可以创建自己的检测规则。实际生产中，团队内往往会制订
一套统一的标准，让整个团队的编码风格达到一致。
eslint 其实与 webpack 没有任何关系，两者并不互相依赖，甚至一般情况下我们并不会在 webpack 中进行 eslint 的
配置，可以单独使用。
语法检查使用 eslint-loader ， 并基于 eslint 包，只用来检查 js 语法。
注意只检查自己写的 js 源代码， 第三方库是不用检查的， 可以在 npmjs.com 中查看规则。
需要使用 js 来的规则库来检查代码 “ airbnb” ， 需要 eslint-config-airbnb-base 和 eslint-plugin-import 两个包
npm i eslint-loader eslint eslint-config-airbnb-base eslint -plugin-import -D

webpack.config.js 中加入
{
package.json 中加入 test:/\.js$/,
exclude: /node_modules/, 在 js 文件中加入
"eslintConfig": { loader:'eslint-loader',
"extends": "airbnb-base" options: { // 下一行 eslint 所有规则失效
} fix:true // eslint-disable-next-line
} console.log(' 这是入口文件 ,11111');
}
开发服务器 devServer 配置
devServer 给我们提供了开发过程中的服务器，是一个使用了 express 的 Http 服务器，它的作用主要
是为了监听资源文件的改变，该 http 服务器和 client 使用了 websocket 通信协议，只要资源文件发生
改变， webpack-dev-server 就会实时的进行编译。
只会在内存中编译，不会有任何输出 , 下载 webpack-dev-server 包
webpack-dev-server 并不能读取你的 webpack.config.js 的配置 output
启动 devServer 指令为 : npx webpack serve 本目录执行
webpack5 无法刷新，解决：添加配置： target: ‘web’
环境的优化
开发环境的优化
打包构建速度
优化代码调式

生产环境的优化
代码运行的性能
HMR( 模块热替换 )
模块热替换 (Hot Module Replacement 即 HMR) 是 webpack 提供的最有用的功能之一 , 它允许在运行时更新各种模块 , 而无需进行完全刷新。
启用这个功能，只需要修改一下 webpack.config.js 的配置 , 使用 webpack 内置的 HMR 插件就可以了， 在 devServer 中使用 hot 参数。
启用 webpack 内置的 HMR 插件后 , module.hot 接口就会暴露在 index.js 中 , 接下来需要在 index.js 中配置告诉 webpack 接受 HMR 的模块。
1. 样式 HMR 功能，在开发环境中使用 style-loader
2. HTM 的 HMR 功能，默认也没有 HMR 功能（不用做 HMR 功能），需要在 entry 入口中引入 html 文件。
3. js 的 HMR 功能，默认没有 HMR 功能，只能处理非入口文件的 js 文件。
启用 webpack 内置的 HMR 插件后 , module.hot 接口就会暴露在 index.js 中 , 接下来需要在 index.js 中配置告诉 webpack 接受 HMR 的模块

if (module.hot) {
module.hot.accept('./print.js', function() { // 告诉 webpack 接受热替换的模块
console.log('Accepting the updated printMe module!');
printMe();
})
}

服务器检测到了 print.js 的代码变化并且执行了 module.hot.accept 的回调函数

去除项目里的死代码　

去除没有用到的 JS 代码
Webpack 通过 tree-shaking 去掉了实际上并没有使用的 js 代码来减少包的大小。
1. 必须使用 es6 模块化， 2. 开启 production 环境
去除没有用到的 CSS
比如我们经常使用的 BootStrap(140KB) 就可以减少到只有 35KB 大小
webpack 使用 purgecss-webpack-plugin 去除无用的 css

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

const PurgecssPlugin = require('purgecss-webpack-plugin');

const glob = require('glob');
const PATHS = { src: join(__dirname, 'src')}

new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
}),
webpack5 总结和作业

配置 webpack 的开发和生产环境
要求支持 jQuery+BootStrap 的开发环境
使用自定义的开发环境开发一个多页面的小案例
将 webpack 打包的资源上线运行