webapck 基础 (小白篇)

为什么选择 webpack

• 社区生态丰富
• 配置灵活和插件化扩展
• 官方更新迭代速度快

配置文件名称

• webpack 默认配置文件 webpack.config.js
• 也可以通过 webpack --config 执行配置文件

webpack 配置组成

module.exports = {
  entry:   ----> 打包文件的入口
	output:  -----> 打包的输出
	mode: 'production'  ----> 环境
	module: {
		rules: [
			{ test: /\.txt$/ }   -----> Loader 配置
		]
	},
	plugins: [      -------> 插件配置
		new HtmlwebpackPlugin({
			template: ''
		})
	]
}

使用 webpack 打包文件

• 使用 webpack 小案例

准备文件及安装webapck

1. 打开终端 常见文件 及 初始化项目 （注意要先安装 node）

mkdir  my-webpack
cd my-webpack
npm init -y

2. 安装 webpack 及 webpack-cli

npm install webpack webpack-cli --save-dev

3. 新建webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'production'
}

4. 创建src 下的 index.js 文件，简单写一写逻辑代码
5. 然后在项目目录下的终端执行

./node_modules/.bin/webpack

• 然后会在 dist 文件夹中找到打包后的 main.js 文件

6. 使用 npm 命令 替代 ./node_modules/.bin/webpack 打包

• 在 package.json 中的 scripts 添加 build 命令

 "scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack"
},

• 执行 npm run build 一样可以打包

entry 和 output

单入口

entry: './src/index.js',
output: {
	path: path.join(__dirname, 'dist'),
  filename: 'build.js'
}

多入口

entry: {
	app: './src/index.js'
	app2: './src/main.js'
},
output: {
	path: path.join(__dirname, 'dist'),
	filename: '[name].js'
},

Loaders

• 本身就是一个函数，接收源文件作为参数，返回转换的结果

常用的 Loaders

• babel-loader
• css-loader
• less-loader
• ts-loader
• file-loader

Plugins

• 插件用于 bundle 文件的优化，资源管理和环境变量注入
• 作用于整个构建构成

常见的 Plugins

• CleanWbpackPlugin 清理构建目录
• CommonsChunkPlugin 讲chunks相同的模块代码提取成公共 js
• HtmlWebpackPlugin 创建 HTML 文件去承载输出的 bundle
• UglifyjsWebpackPlugin 压缩JS

Mode

• 用来指定当前的构建环境是 production development 还是 none
• 设置 mode 可以使用 webpack 内置函数，默认值是 production

module.exports = {
  mode: 'development'
};

• 或者从 cli 参数中传递

webpack --mode=development

内置函数功能

• 选项 development

• production

• node

使用 babel 解析 ES6

• 安装 babel 解析文件

npm i @babel/core @babel/preset-env babel-loader -D

• 创建 .babelrc 文件 并添加：

{
  "presets": [
    "@babel/press-env"
  ]
}

• webpack.config.js 中添加 rules

module: {
	rules: [
		{
			test: /.js$/,
			use: 'babel-loader'
		}
	]
}

解析 CSS 文件

• 安装 style-loader 和 css-loader
• 修改 webpack.config.js 文件

module: {
	rules: [
		{
			test: /.js$/,
			use: 'babel-loader'
		},
		{
			test: /.css$/,
			use: [
				'style-loader',
				'css-loader'
			]
		}
	]
}

url-loader 解析图片

• 安装 url-loader 和 file-loader

module: {
	rules: [
		{
			test: /.js$/,
			use: 'babel-loader'
		},
		{
			test: /.css$/,
			use: [
				'style-loader',
				'css-loader'
			]
		},
		{
			test: /.(png|jpg|gif|jpeg)$/,
			use: [
				{
					loader: 'url-loader',
					options: { // 图片大小的限制 如果小于 10k 转成 base64 格式
						limit: 10240
					}
				}
			]
		}
	]
}

webpack 文件监听

1. 启动 webpack 命令时，带上 --watch 参数
   • 缺点是： 每次需要手动刷新浏览器
2. 在配置 webpack.config.js 中设置 watch: true

• 文件监听的原理分析
  • 轮询判断文件的最后编译事件是否变化
  • 某个文件发生了变化，并不会立即监听者，而是先缓存起来，等 aggregateTimeout

watch: true,
watchOptions: {
	// 默认为空，不监听文件或文件件，支持正则
	ignored: /node_modules/,
	// 监听发生变化后等待 xxx 毫秒去执行，默认 300
	aggregateTimeout: 300,
	// 判断文件是否发生变化，通过不停的询问系统指定文件有没有变化实现，默认每秒问 1000 次
	poll: 1
}

热更新 webpack-dev-server

• 特点： 不刷新浏览器，不输出文件，而是放在内存中
• webpack-dev-server --open

热更新 使用 webpack-dev-middleware

• 通过 node express/koa 创建一个 server 编写相关逻辑
• 将 webpack 输出文件传输给服务器
• 适用于灵活的定制场景

热更新的原理分析

1. Webpack Compile

• 将 JS 编译成 Bundle (打包好输出的文件)

2. HMR (Hot Module Replacement) Server：

• 将热更新文件传输给 HMR Rumtime

3. Bundle Server:

• 提供文件在浏览器的访问 (通过服务器的方式访问，例如 127.0.0.1:8080)

4. HMR Rumtime:

• 打包时会被注入到浏览器中，使浏览器和服务器建立连接，通常的连接方式是用 websocket, 用来更新文件的变化

5. bundle.js

• 构建输出的文件

热更新的过程

1. 热更新的启动阶段

• 代码通过 Webpack Compile 进行编译打包，然后将编译好的文件传输给 Bundle Server （服务器），让文件以 server 的方式被 浏览器 访问到。

2. 更新阶段

• 代码通过 Webpack Compile 进行编译打包，将代码发送给 HMR Server 知道哪些 js 文件发生变动，然后通知 HMR Rumtime （HMR Server 在 服务端，HMR Rumtime 在客户端）哪些文件发生变化，通常是已JSON 的方式传输，然后 HMR Rumtime 更新代码.

文件指纹

• 打包后输出的文件名的后缀

Hash

• 和整个项目的构建相关, 只要项目文件有修改，整个项目构建的 hash 值就会更改

Chunkhash

• 和 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash 值

Contenthash

• 根据文件内容来定义 hash，文件内容不变，则 Contenthash 不变

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name][chunkhash:8].js'
  },
	module: {
		rules: [
			{
				test: /\.(png|svg|jpg)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: 'img/[name][hash:8].[ext]'
						}
					}
				] 
			},
			{
				test: /.css$/,
				use: [
					// 'style-loader', 这个是把 css 放到 style 里面和用  MiniCssExtractPlugin 有冲突，它是把 css 放到一个独立的文件中
					MiniCssExtractPlugin.loader,
					'css-loader'
				]
			},
		]
	}
  mode: 'production',
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name][contenthash:8].css'
		})
	]
}

• 图片文件指纹设置可选参数
  • [ext] : 资源后缀名
  • [name] : 文件名称
  • [path] : 文件相对路径
  • [folder] : 文件所在的文件夹
  • [contenthash]: 文件内容的 hash 默认 MD5 生成
  • [hash] : 文件内容的 hash 默认 MD5 生成
  • [emoji] : 一个随机的指定文件内容的 emoji

代码压缩

JS 文件的压缩

• uglifyjs-webpack-plugin webpack4.0 后内置了

css 压缩

• 安装
  • npm i optimize-css-assets-webpack-plugin -D
  • npm i cssnano -D
• 代码

new OpeimizeCssAssetsPlugin({
	assetNameEegExp: /\.css$/g,
	cssProcessor: require('cssnano')
}),

html 压缩

• 安装

npm i html-webpack-plugin -D

• 代码

new HtmlWebpackPlugin({
	// 模板 所在的位置
	template: path.join(__dirname, 'src/index.html'),
	// 指定打包后的文件名称
	filename: 'index.html',
	// 声明 HTML 使用什么 chunks
	chunks: ['index'],
	// 把引入的 js 或 css 自动注入
	inject: true,
	minify: {
		html5: true,
		collapseWhitespace: true,
		preserveLineBreaks: false,
		minifyCSS: true,
		minifyJS: true,
		removeComments: false
	}
})