webpack

webpack基本使用

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

在项目中安装webpack

在终端运行如下的命令，安装webpack相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.9.0 -D
开发,上线要用到记录到dependencies
开发要用到devDependencies
-S 是–save的简写开发部署会用到
-D 是 --save-dev的简写开发阶段会用到

在项目中配置webpack

1. 在项目根目录中，创建名为webpack.config.js的配置文件，并初始化如下基本配置：

//使用node.js中的导出语法，向外导出一个webpack的配置对象
 module.exports = {
 //用mode来指定webpack构建模式，可选有devlopment和production
 mode:'development'  
} 

2. 在package.json的script节点下，新增dev脚本如下：

“scripts”:{
	//scripts节点下的脚本，可以通过npm run dev执行
	"dev":"webpack"
}

2. 在终端中运行npm run dev,启动webpack进行项目的打包构建

webpack中基本使用

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

const path = require('path')
module.exports={
	//打包入口文件路径
	entry:path.join(__dirname,'src/index.js'),
	output:{
		//输出文件路径
		path:path.join(__dirname,'./dist')
		//输出文件的名称
		filename:'bundle.js'
	}
}

webpack中的插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便，最常用的webpack插件有如下两个：

1. webpack-dev-server

类似于node.js阶段用到的nodemon工具
每当修改源代码，webpack会自动进行项目的打包和构建

2. html-webpack-plugin
   webbpack中的html插件（类似于一个模块板引擎插件）
   可以通过插件自定义index.html页面的内容

安装webpack-dev-server

npm install webpack-dev-server@3.11.2 -D
npm install webpack-dev-server@3.10.1 -D
配置webpack-dev-server
修改package.json - >scripts中的dev命令如下

“scripts”:{
	"dev":"webpack server",
}

再运行npm run dev命令，重新进行项目的打包
在浏览器中访问http://localhost:8080地址，查看自动打包效果
注意：webpack-dev-server会启动一个实时打包的http服务器

安装html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：
npm install html-webpack-plugin@5.3.2-D

//1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
	template:'./src/index.html',//指定原文件的存放路径
	filename:'./index.html',//指定生成的文件的存放路径
})
module.exports = {
	mode：'development',
	piugins:[htmlPlugin],//3.通过plugin节点，使htmlPlugin插件生效
}

devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的设置，显示代码如下：

devServer:{
//初次打包完成后，自动打开浏览器
	open:true,
	//其实打包所使用的主机地址
	host:'127.0.0.1'
	//实时打包所使用的端口号
	port:80,
}

注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效

webpack中的loader

在实际开发过程中，webpack默认只能打包处理后缀名结尾的模块，
webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错
loader加载器的作用：协助webpack打包处理特定的文件模块

• css-loader可以打包处理.css相关文件
• less-loader可以打包处理.css相关的文件
• babel-loader可以打包处理webpack无法处理的高级js语法
  webpack中的loader

打包处理css文件

运行npm i style-loader@3.0.0 css-loader@5.2.6 -D命令，安装处理css文件的loader
在webpack.config.js的module ->rules数组中，添加loader规则如下：

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

其中，test表示匹配的文件类型，use表示对应要调用loader
注意：

• use数组中指定的loader顺序是固定的
• 多个loader的调用顺序是：从后往前调用

1.webpack默认只能打包处理.js结尾的文件，处理不了其他后面的文件
2.由于代码中包含了index.css这个文件，因此webpack默认处理不了
3.当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器
4,webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader）
5.当css-loader处理完毕之后，会把处理的结果，转交给下一个loader(转交给style-loader)
6.当style-loader处理完毕之后，发现没有下一个loader了于是把处理的结果，转交给webpaack
7.webpack把style-loader处理的结果，合并到、/dist/bundle.js中，最终生成打包好的文件

打包处理less文件

运行npm i less-loader@10.0.1 less@4.1.1 -D命令
在webpack.config.js的module->rules数组中，添加loader规则如下

module:{
	rules:[
		{test:/\.less$/,use：['style-loader','css-loader','less-loader']}
	]
}

打包处理样式表中与url路径相关的文件
运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
在webpack.config.js的module - >rules数组中，添加loader规则如下：

module:{
	//所有第三方文件模块的匹配规则
	rules:[
	
	//文件后缀名匹配规则
	{test:/\.jpg|png|gif$/,use:'url-loader?limit=2229'},
	]
}

其中？之后的是loader的参数项：
limit用来指定图片的大小，单位是字节（byte）
只有<=limit大小的图片，才会被转为base64格式的图片

打包处理js文件中的高级语法
webpack只能打包处理一部分的高级javaScript语法，对于那些webpack无法处理的高级js语法，需要借助babel-loader进行打包处理，例如

//定义了名为info的装饰器
function info(target){
//为目标添加静态属性
target.info = "person info"
}
//为了Person类应用info装饰器
@info
class Person{}
//4.打印Person的静态属性 info
console.log(Person.info)

安装babel-loader相关的包
运行如下的命令安装对应的依赖包：
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在webpack.config.js的module->rules数组中，添加loader规则如下：

//必须使用exclude指定排除项，因为node_rules目录下的第三方包不需要被打包
{test：/\.js$/,use:'babel-loader',exclude:/node_modules/}

配置babel-loader
在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下：

//
module.exports = {
//声明babel可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

打包发布

在package.json文件的script节点下，新增build命令如下：

"scripts":{
	"dev":"webpack server",
	"build":"webpack --mode production"
}

–model是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行低吗压缩和性能优化
注意：通过–model指定的参数项，会覆盖webpack.config.js中的model选项
把javaScript文件统一生成到js目录中
在webpack.config.js配置文件的output节点中，进行如下配置

output:{
	path:path.join(__dirname,'dist'),
	filename:'js/bundle.js'
}

修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径

{
	test:/\.jpg|png|gif$/,
	use:{loader:'url-loader',
	options:{
		limit:22228,
		outputPath:'image',
		},
	},
}

自动清理dist目录下的旧文件

为了每次打包发布时自动清理dist目录中的旧文件，可以安装并配置clean-webapck-plugin插件：

//安装清理dist的插件
npm install clean-webpack-plugin@3.0.0 -D
//2.按需导入插件，得到插件的够着函数，创建插件的实例对象
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new  CleanWebpackPlugin()

//3.把创建cleanPlugin 的插件实例对象，挂载到plugin节点当中

什么是Source Map

Source Map是一个信息文件，里面存放着位置信息，Source Map文件中存储着压缩混淆后的代码，所对相应转换前的位置

//在开发设置阶段，建议大家都把devtool的值设置为eval-source-map
devtool:'eval-source-map',
//在实际发布时，为了不暴露源码，可以将devtool的值设置为nosources-source-map
devtool:'nosources-source-map'
//定位行数且暴露源码
devtool:'source-map'

Source Map的最佳实践：

开发环境下：
建议吧devtool的值设置为eval-source-map
好处：可以精准定位到具体的错误行号
生产环境下：
建议关闭Source Map或将devtool的值为nosources-source-map
好处：防止源码泄漏，提高网站的安全性