Vue-----webpack基础详解

闾丘炫明

2023-12-01

Vue-----webpack基础详解

一、安装：

先全局安装，再局部安装：

全局：cnpm i webpack webpack-cli -g

局部：cnpm i webpack webpack-cli（在创建项目后，在项目目录中）

二、使用：

1、创建项目：手动或者使用命令创建：

mkdir app

cd app

2、初始化：cnpm init y

3、安装：cnpm i webpack webpack-cli --save-dev

4、在项目下建src文件夹用于放源代码

5、在项目下创建webpack.config.js文件，用于下入配置

最基础的配置：

const path=require("path");

module.exports={
    //入口：相对路径
	entry:"./src/js/main.js",//可以根据自己的需求来写
	output:{
		path:path.resolve(__dirname,"dist"),
        //path:__dirname+'/dist',//写法可以直接拼接
		filename:"bundle.js"
	},
	mode:"development"
}

6、在命令行输入webpack完成打包，需要测试就在src文件夹下面的文件中输出语句

三、webpack与模块化开发

模块化开发的两种方法：

（1）es6：import({}) from export(defult)

（2）AMD：require(资源路径) module.export(模块)

import 和require的区别：

import：语句式语法，在语句最上层，编译时引入，异步引入，模块化导入，节省内存；浏览器缓存，运行效率提升

require：函数式语法，使用在任何语句块内，运行时引入，同步引入，模块化导入，节省内存；浏览器缓存，运行效率提升

为何要使用模块化开发（模块化开发有何好处？）：

模块化导入，节省内存

浏览器缓存，运行效率提升

企业项目工程化，项目分工明确

四、webpack.config.js 解析

1、loader：

用于配置识别文件类型（webpack默认仅识别js文件）

每一种loader都需要安装：cnpm i --save-dev css-loader

常用的loader：

（1）file-loader：将文件输出到文件夹，可以通过在代码中使用url引用文件

（2）url-loader：在文件很小时，以base64将文件内容注入到代码中

（3）source-map-loader：加载额外的sourceMap文件，便于程序断点调试

（4）image-loader：加载并压缩图片文件

（5）babel-loader：将es6转换为es5

（6）css-loader：加载css，支持模块化、压缩、文件导入等

（7）style-loader：将css注入到js中，通过DOM加载css，常常与css-loader联合使用

（8）eslint-loader：通过ESlint检查js代码

loader的配置语法：

module:{//module中配置
		rules:[//作为文件规则，使用对象数组方式对不同的文件类型分开配置
			{test:/\.css$/,use:['style-loader','css-loader']},
			{test:/\.(png|jpg|gif|svg|jpeg|jifi|bmp)$/,use:['file-loader']}//不同图片格式，可以直接使用file-loader
		]
	}

2、plugin：

插件处理，部分需要安装,所有的都需要导入：

cnpm i 插件名称

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

常见的plugin：

（1）define-plugin：定义环境变量

（2）commons-chunk-plugin：提取公共代码

（3）uglifyjs-webpack-plugin：通过uglifyES压缩ES6代码

（4）clean-webpack-plugin：自动清除文件，仅在目标文件夹生成当前文件

（5）html-webpack-plugin：处理老版本的html

（6）cssmin-webpack-plugin：

plugin使用语法：

plugins:[
		new HtmlWebpackPlugin({
			hash:true,//为所有包含的脚本和CSS文件附加唯一的编译哈希，这对缓存清除很有用
			filename:'index.html',//打包后生成的文件名  放在output.path里面
			template:'./src/index.html',//来自哪里 模板文件
			// chunks:['there'],//处理文件个数
			inject: 'body',//引入js的位置:引入js的位置:  'head'-头部引入 'body'/true--</body>之前引入 false不引入
			minify:{//压缩项配置
				removeComments:true,//是否清除HTML注释  
				collapseWhitespace:true,//是否压缩HTML  
				removeSciptTypeAttributes:true,//是否删除< script>的type="text/javascript"  
				removeStyleLinkTypeAttributes:true, //是否删除< style>和< link>的type="text/css"  
				minifyJS:false,//是否压缩页内JS  
				minifyCSS:true//是否压缩页内CSS 
			}
		}),
		new CleanWebpackPlugin()//清理目标文件夹中的其他文件，仅保留当前生成的文件
		// new HtmlWebpackPlugin({
		// 	title:'Output Management'
		// })
	],

3、loader和plugin的区别：

loader：识别文件，让webpack拥有加载和解析非js的文件能力；Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）

plugin:插件处理,用于优化/压缩/清理等等，扩展webpack功能，plugin在plugins中单独配置。类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

4、server：

热启动，并且运行后会直接打开页面，不会产生磁盘文件，devserver打包完毕直接加载到内存运行

安装：cnpm i --save-dev webpack-dev-server

配置：

devServer:{
	    contentBase:'./build',
			host:'localhost',
			compress:true,
			port:8080,
			open:true,
			hot:true
	},

更改命令名：

“dev”: “webpack-dev-server --open --inline --progress --config webpack.config.js”,

启动：cnpm run dev

5、热启动(server)和静态文件加载的区别：

（1）热启动：运行后会直接打开页面，不会产生磁盘文件；当我们改动文件后保存，浏览器已经自动刷新了我们的修改，便于开发；修改index.html文件，并不会热加载。热加载相关的是入口文件，修改这个文件，会热加载。修改js文件关联的css文件也会热加载；如果用了HTML的插件，在入口文件中引入，也会热加载

（2）静态文件：修改关联的css文件不会热加载(使用webpack --watch会热更新)；会生成磁盘文件保存在目标文件夹下面；修改index.html文件会热加载

6、webpack打包过程的执行步骤：

（1）读取命令行或者配置文件里的参数

（2）初始化工具，启动命令

（3）读取entry（入口文件）

（4）使用loader

（5）plugin

（6）输出文件

7、webpack-dev-server思想：

当文件发生修改，通知各个模块进行更新加载，加载到计算机内存，刷新浏览器

8、webpack如何优化前端性能的？

（1）html：结构清晰

（2）css：文件合并，样式选择器预先编译

（3）js：合并Dom操作，避免重绘和重排

（4）webpack使用plugin压缩、提取公共代码，避免不必要的因素影响到前端性能

Vue-----webpack基础详解