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压缩、提取公共代码,避免不必要的因素影响到前端性能

 类似资料: