一.概念
什么是 Webpack?
用于javaScript应用程序的静态模块打包工具
静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件
注意：
只有和入口有直接/简介的引入关系的模块，才会被打包
为什么要学 Webpack？
原因：把静态模块内容，压缩，整合，转译等（前端工程化） 把 less / sass 转成 css 代码 把 ES6+ 降级成 ES5 支持多种模块文件类型，多种模块标准语法
二.Webpack入门
使用 Webpack
步骤： 1.新建项目文件夹，初始化包环境 2.新建 src 源代码文件夹（书写代码） 3.下载 webpack webpack-cli 到项目（版本独立）
npm i webpack webpack-cli -D/--save-dev
4.项目中运行工具命令，采用自定义命令的方式（局部命令）
"scripts": {
"build":"webpack"
}
5.自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
npm run build
修改 Webpack 打包入口和出口
步骤： 1.项目根目录，新建 webpack.config.js 配置文件 2.导出配置对象，配置入口，出口文件路径
const path = require('path'); module.exports = { // 配置入口
entry: './src/main.js', // 配置出口
output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js',
},
}
3.重新打包观察
npm run build
三.自动生成 html 文件
插件 html-webpack-plugin： 在 Webpack 打包时生成 html 文件
步骤： 1.下载 html-webpack-plugin 本地软件包
npm install --save-dev html-webpack-plugin
2.配置 webpack.config.js 让 Webpack 拥有插件功能
3.指定以 public/index.html 为模板复制到 dist/index.html，并自动引入其他打包后资源
const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = {entry: 'index.js', output: { path: path.resolve(dirname, './dist'), filename: 'index_bundle.js',
}, // 安装插件
plugins: [new HtmlWebpackPlugin({
// 指定自动复制的HTML文件 template:path.join(dirname,'public/index.html') })],
};
四.打包 css 模块
加载器 css-loader：解析 css 代码 加载器 style-loader：把解析后的 css 代码插入到 DOM 步骤： 1.准备 css 文件引入到 src/main.js 中（压缩转译处理等）
import './css/index.css'/'路径'
2.下载 css-loader 和 style-loader 本地软件包
npm install --save-dev css-loader
npm install --save-dev style-loader
3.配置 webpack.config.js 让 Webpack 拥有该加载器功能
module.exports = {
module: { rules: [ {test: /.css$/i, use: ["style-loader", "css-loader"],
},],
},
};
4.打包后运行 dist/index.html 观察效果
注意：
Webpack 默认只识别 js 和 json 文件内容
五.打包 less 模块
加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包 步骤： 1.准备 less 样式并引入到 src/main.js 中 2.下载 less 和 less-loader 本地软件包
npm install less less-loader --save-dev
3.配置 webpack.config.js 让 Webpack 拥有功能
rules: [
{ test: /.less$/i, use: [ // compiles Less to CSS 'style-loader', 'css-loader', 'less-loader', ],
},
],
4.打包后运行 dist/index.html 观察效果
六.打包图片
资源模块：Webpack5 内置了资源模块的打包，无需下载额外 loader 步骤： 1.准备图片素材到 src/assets 中 2.在 index.less 中给 body 添加背景图
body {
//设置背景图
background-image: url(../assets/background.png/路径);
}
3.在 main.js 中给 img 标签添加 logo 图片
import imgObj from './assets.logo.png' document.querySelector('.logo-img').scr = imgObj
4.配置 webpack.config.js 让 Webpack 拥有打包图片功能
rules: [ // 规则列表 // ...
{ // 针对资源模块（图片，字体文件，图标文件等）处理 test: /.(png|jpg|jpeg|gif)$/i,type: 'asset', generator: { // 输出文件时，路径+名字 filename: 'assets/[hash][ext]'
}
}
]
5.打包后运行 dist/index.html 观察效果
注意：判断临界值默认为 8KB 小于 8KB 文件会被转成 data URI（base64字符串） 大于 8KB 文件会被复制到 dist 下
七.babel 编译器
babel 定义：是一个 JavaScript 语法编译器，将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中 babel-loader：让 Webpack 可以使用 babel 转译 JavaScript 代码 步骤： 1.下载 babel babel-loader core 本地软件包
npm install -D babel-loader @babel/core @babel/preset-env
2.配置 webpack.config.js 让 Webpack 拥有功能
{ test: /.m?js$/, exclude: /(node_modules|bower_components)/, use: {loader: 'babel-loader', options: { presets: ['@babel/preset-env'] }
}
}
3.打包运行后 dist/index.html 观察效果
webpack-dev-server：快速开发应用程序 作用：启动 Web 服务，打包输出源码在内存，并检测代码变化热更新到网页
八.Webpack 开发服务器
步骤： 1.下载 webpack-dev-server 软件包到当前项目
npm i webpack-dev-server -D/--save-dev**
2.配置自定义命令，并设置打包的模式为开发模式
"scripts": { "build": "webpack", "dev": "webpack serve --mode=development" },
3.使用 npm run dev 来启动开发服务器，试试热更新效果
九.打包模式
打包模式：告知 Webpack 使用相应模式的内置优化
| 模式名称 | 模式名字 | 特点 |
|---|---|---|
| 开发模式 | development | 调试代码，实时加载，模块热替换等 |
| 生产模式 | production | 压缩代码，资源优化，更轻量等 |
设置： 方式1：在 webpack.config.js 配置文件设置 mode 选项
module.exports = {
//...
mode:'production'
}
方式2：在 package.json 命令行设置 mode 参数
"scripts": { "build": "webpack --mode=development/production ", "dev": "webpack serve --mode=development/production" },
注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置
十.开发环境调错 - source map
source map：可以准确追踪 error 和 warning 在原始代码的位置 问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数） 设置：webpack.config.js 配置 devtool 选项
module.exports = {
//...
devtool:'inline-source-map'// 把代码位置信息一起打包
}
inline-source-map 选项：把源码的位置信息一起打包在 js 文件内 注意：source map 仅适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）
十一.解析别名 alias
解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单 配置解析别名：在 webpack.config.js 中设置
module.exports = { //... **resolve: { **
alias: { Utilities(别名): path.resolve(dirname, 'src/utilities/'), Templates(别名): path.resolve(dirname, 'src/templates/'), },
},
};
