Webpack基础教程
什么是Webpack
webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
Webpack 五个核心
1.Entry
入口(Entry)指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
2.Output
输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。
3.Loader
Loader让Webpack能够去处理那些非JavaScript文件(webpack自身只理解Javascript)
4.Plugins
插件(plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。
5.Mode
模式(mode)指示Webpack使用相应模式的配置
选项：
1)development 能让代码本地调试运行的环境
2)production 能让代码优化上线运行的环境
图片压缩
小于8kb 压缩成base64 变成字符串
优势：不需要额外发请求 减少请求资源 降低服务器压力
劣势：体积变大
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset', //会转化成base64
parser: {
dataUrlCondition: {
maxSize: 8 * 1024, //8kb
}
},
generator: {
// 输出图片名称
// [hash:10] 表示只取 前十位
filename: 'static/img/[hash:10][ext][query]'
}
},
处理js 资源
有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢?
原因是 Webpack 对s 处理是有限的，只能编译s 中 ES 模块化语法，不能编译其他语法，导致s 不能在E 等浏览器运行，所以我们希望做一些兼容性处理。
其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。
。针对is兼容性处理，我们便用 Babel 来完成
。针对代码格式，我们使用 Eslint 来完成
我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理
Eslint
可组装的 JavaScript 和JSX 检查工具
这句话意思就是:它是用来检测 is 和sx 语法的工具。
可以配置各项功能我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查
babel
JavaScript 编译器。
主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境
开发服务器&自动化
每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化
第一步: 下载包
npm i webpack-dev-server -D
第二步: 配置
1
2
3
4
5
6
// 开发服务器: : 不会输出资源 不会去进行打包 在内存中打包
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
生产模式
生产模式是开发完成代码后，我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化，让其运行性能更好。
优化主要从两个角度出发:
1.优化代码运行性能
2.优化代码打包速度
Css 处理
#提取 Css 成单独文件
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
这样对于网站来说，会出现闪屏现象，用户体验不好
我们应该是单独的 Css 文件，通过 link 标签加载性能才好
npm i mini-css-extract-plugin -D
Css 兼容性处理
1. 下载包
npm i postcss-loader postcss postcss-preset-env -D
css-loder 下面
1
2
3
4
5
6
7
8
9
10
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
再去package.json 取配置 兼容到什么程度
开发模式参考：(生产模式稍加修改就可以)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/*
webpack.config.js webpack的配置文件
作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行~ 模块化默认采用commonjs
*/
// resoleve用来拼接绝对路径的方法
const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 用来获取样式的loader
function getStyle(pre) {
return[
// 'style-loader', // 将js种css通过创建style标签 添加到html文件中生效
MiniCssExtractPlugin.loader, // 提取css成单独的文件
'css-loader', //将css编译成commonjs模块到js种
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
pre,
].filter(Boolean);
}
module.exports = {
// 写webpack配置
// 入口起点
entry: './src/main.js',
// 输出
output: {
// 所有文件的输出路径
// 入口文件打包输出文件名
filename: 'static/js/dist.js',
// 输出路径
// _dirname nodejs的变量，代表当前文件的目录绝对路径
// path: path.resolve(__dirname, '../dist'),
// 开发模式 无需输出
path: undefined,
// 自动清空上次打包
// 原理：将path整个目录清空 再打包
clean: true
},
// 加载器
module: {
// loader的配置
rules:[
{
// 每个文件只能被其中的一个loader配置处理
oneOf:[
{ test: /\.css$/, //只检测 css
use: getStyle()
}, // 执行顺序 从右到左 从下到上
{
test: /\.less$/,
use: getStyle('less-loader')
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset', //会转化成base64
parser: {
dataUrlCondition: {
maxSize: 8 * 1024, //8kb
}
},
generator: {
// 输出图片名称
// [hash:10] 表示只取 前十位
filename: 'static/img/[hash:10][ext][query]'
}
},
{
test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
type: 'asset/resource', //不会转化成base64
generator: {
// 输出图片名称
// [hash:10] 表示只取 前十位
filename: 'static/media/[hash:10][ext][query]'
}
},
{
test: /\.js$/,
// exclude: /(node_modules|bower_components)/, //排除文件
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, "../src"), // 也可以用包含
use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
}
}
]
}
// 详细的loader配置
// {
// // 匹配哪些文件
// test: /\.css$/,
// // 使用哪些loader进行处理
// use: [
// // use数组中执行顺序：从右到左，从下到上，依次执行
// // 创建style标签，将js中的样式资源插入进行，添加到head中生效
// // 'style-loader',
// // 将css文件变成conmonjs模块加载js中,里面内容时样式字符串
// // 'css-loader',
// 'style-loader',
// 'css-loader'
// ]
// }
],
},
// plugins的配置
plugins:[
// 详细的plugins的配置
new ESLintPlugin({
// 检测哪些文件
context: path.resolve(__dirname, '../src'),
exclude: "node_modules", // 默认值
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
new MiniCssExtractPlugin({
filename: "static/css/main.css"
})
],
// 开发服务器: 不会输出资源 不会去进行打包 在内存中打包
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
},
// 模式
mode: "development",
devtool: "cheap-module-source-map",
}
// 运行方式:
// npx webpack serve --config ./config/webpack.dev.js
