PART1 WebPack

WebPack

初始化项目

1. 新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件package.json
2. 新建src 源代码目录
3. 新建stc —> index.html首页和src---->index.js脚本文件
4. 初始化首页基本的结构
5. 运行npm install jQuery -S 命令,安装jQuery
6. 通过ES6模块化的方式导入jQuery

安装包的示例(webpack)

-S/--save  # 保存到生产环境的包
-D/--save-dev  # 保存到开发环境的包
npm install 包名[@版本号] -D
# 安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
1
2
3
4
5

配置运行

1. 创建webpack.config.js配置文件

module.exports = {
	mode: 'development' //mode指定构建模式,development,production两种模式
}
1
2
3

2. 在package.josn的scripts节点下,新增dev脚本

"scripts": {
	"dev": "webpack" //执行npm run这样的命令
}
1
2
3

3. 运行`npm run dev``

运行脚本会去webpack.config.json文件读取mode这个字段

配置输入/输出文件

在webpack.config.js配置文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口

const path = require('path') 
module.exports = {
	entry: path.join(__dirname,'./src/index.js')	//打包入口文件
	output: {
		path: path.join(__diirname,'./dist'),	//输出文件的存放路劲
		filename: 'bundle.js'	//输出文件的名称
	}
}
1
2
3
4
5
6
7
8

配置插件—webpack-dev-server(自动刷新)

1. 安装命令

npm install webpack-dev-server@3.11.2 -D
1

2. 修改package.json中的scripts中的dev命令脚本

"scripts": {
	"dev": "webpack serve" 
1
2

3. 重新运行命令,重新打包
4. 在浏览器中访问,查看效果

webpack-dev-serve 会启动一个实时打包的http服务器

配置插件—html-webpack-plugin(直接访问根目录的资源文件)

1. 安装命令

npm install html-webpack-plugin@5.3.2 -D
1

2. 在webpack.config.js配置

//导入HTML插件
const HtmlPlugin = require('html-webpack-plugin')
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
	template: './src/index.html',	//指定原来的路径
	filename: './index.html',		//指定生成的文件的存放路径
})

module.exports = {
	mode: 'development',
	plugins: [htmlPlugin]		//让插件生效
}
1
2
3
4
5
6
7
8
9
10
11
12

配置插件—devServer节点

module.exports = {
	devServer: {
		open: true,
		port: 80,
		host: '127.0.0.1'
	}
}
1
2
3
4
5
6
7

loader—加载CSS文件

1. 运行命令

npm i style-loader@3.0.0 css-loader@5.2.6 -D 
1

2. 在webpack.config.js 的module —> rules配置规则

module: {
	rules: [
		{test: /\.css$/,use: ['style-loader','css-loader']}
	]
}
1
2
3
4
5

其中test表示文件类型,use表示对应要调用的lader

loader—加载less文件

1. 运行命令

npm i less-loader@10.0.1 less@4.1.1 -D
1

2. 在webpack.config.js 的module —> rules配置规则

module: {
	rules: [
		{test: /\.less$/,use: ['style-loader','css-loader','less-loader']}
	]
}
1
2
3
4
5

loader—base64图片优化(针对于小图片)

1. 安装命令

npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
1

2. 在webpack.config.js 的module —> rules配置规则

module: {
	rules: [
		{test: /\.jpg|png|gif$/,use: ['url-loader?limit=22229']}
	]
}
1
2
3
4
5

limit用来指定图片大小,单位是字节(byte)。只有<=limit大小的图片,才会被转换成base74格式图片

loader—babel-loader(处理ES6高级语法)

1. 安装命令

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
1

2. 在webpack.config.js 的module —> rules配置规则

module: {
	rules: [
		{test: /\.js$/,use: 'babel-loader',excloude: /node_modules/}
	]
}
1
2
3
4
5

3. 在根目录下面创建babel.config.js的配置文件,定义Babel的配置项

module.exports = {
	//生命babel可用的插件
	plugins: [['@babel/plugin-proposal-decorators',{legacy: true}]]
}
1
2
3
4

打包发布

1. 在package.json文件中的scripts节点下,新增build命令

"scripts": {
	"dev": "webpack serve",
	"build": "webpack --mode production"	//项目发布时,运行build命令
}
1
2
3
4

--model是一个参数项,用来指定webpack的运行模式,production代表生产环境,会对打包生成的文件进行代码压缩,性能优化。通过--model指定的参数项,会覆盖webpack.config.js中的model选项

打包发布—对应的文件放入对应的文件夹

1. js

const path = require('path') 
module.exports = {
	entry: path.join(__dirname,'./src/index.js')	//打包入口文件
	output: {
		path: path.join(__diirname,'./dist'),	//输出文件的存放路劲
		filename: 'js/bundle.js'	//输出文件的名称
	}
}
1
2
3
4
5
6
7
8

2. img

{test: /\.jpg|png|gif$/,use: ['url-loader?limit=22229&outputPath=images']}
1

打包发布—自动删除dist文件夹

1. 安装命令

npm install --save-dev clean-webpack-plugin
1

2. 在webpack.config.js中配置

//导入构造函数,花括号代表结构赋值
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpackConfig = {
	plugins: [
		new CleanWebpackPlugin()
	]
}
1
2
3
4
5
6
7

Source Map简介

Source Map 就是一个信息文件,里面存着位置信息。SourceMap文件中存储着压缩混淆后的代码,所对应的转换前的位置。出错的时候,处理将工具直接显示原始代码,而不是转换后的代码,呢能够极大的方便后期的调试

Source Map—打包前的对应的位置

开发环境下面使用

1. 在webpack.config.js中配置

module.export = {
	devtool: 'eval-source-map'
}
1
2
3

Source Map—打包后的源代码的位置

生产环境下面使用

1. 在webpack.config.js中配置

module.export = {
	devtool: 'nosources-source-map'
}
1
2
3

Source Map—即暴露源代码也有行号

不推荐使用,开发环境不安全

1. 在webpack.config.js中配置

module.export = {
	devtool: 'source-map'
}
1
2
3

配置 @ 路径的配置

1. 在webpack.config.js配置

module.export = {
	resolve: {
		alias: {
			'@': path.join(__dirname,'./src/')
		}
	}
}
1
2
3
4
5
6
7

不安全`

1. 在webpack.config.js中配置

module.export = {
	devtool: 'source-map'
}
1
2
3

配置 @ 路径的配置

1. 在webpack.config.js配置

module.export = {
	resolve: {
		alias: {
			'@': path.join(__dirname,'./src/')
		}
	}
}
1
2
3
4
5
6
7