[前端笔记030]webpack和vite

前言

• 本笔记参考视频，李立超:BV1Kd4y147gg p1 -p12

webpack

• 前端的模块化，使用type=module会有兼容性问题，而且模块过多时影响加载速度
• 解决方法，使用打包工具将模块打包成一个文件，将模块化的代码转化为旧的JS代码，既解决了兼容性问题，又解决了模块过多的问题
• 使用webpack/vite，前者老且复杂，后者新简单
• 要用webpack，需要使用node，使用步骤
  1. 初始化项目 yarn init -y
  2. 安装依赖webpack、webpack-cli，后者为命令行工具
  3. 在项目中创建src目录，然后编写代码，index为入口文件，编写时使用前端的模块化编写规范，使用export default{}，暴露模块；index中使用import 模块名 form “path”，引入模块。
  4. 打包，yarn/npx webpack，生成dist文件夹，为打包后的文件
• 需要使用jquery时，就可以使用npm下载后再引入了
• src中按前端规范写，其他按后端规范写
• 打包配置文件，webpack.config.js，

module.exports ={
	mode:"", //设置打包模式，production/development 生产模式/开发模式
	entry:""/[多入口数组]/{打包成多文件}, //指定打包时的主文件 默认 ./src/index.js
	output:{
		path: path.resolve(),//指定打包目录，必须要绝对路径
		filename:"",//打包后的文件命，可以使用变量
		clean:true//自动清理打包目录
	}, //配置打包后的输出
	// 默认只能处理js文件，需要处理其他文件时，需要引入其他loader，然后使用module进行配置
	module:{
		rules:[
			{
				test:/\.css$/i,
				type:["style-loader","css-loader"] //从后往前加载，第一个负责引入样式，第二个负责转换css
			},
			{
				test:/\.jpg$/i,
				type:"asset/resource" //图片等数据可以通过指定type来处理
			}
		]
	} ,
	//扩展功能的插件，常用的html-webpack-plugin,自动生成html，并引入打包生成的js
	plugins: [
	    new HtmlWebpackPlugin({
        title: "Output Management" 
	    })
	],
	devtool:"inline-source-map" //将打包后代码与源码形成映射，方便调试
}

• 引入css时，使用import “path”
• 引入图片时，使用import xxx from “path”
• 当有浏览器兼容性问题时，可以使用babel，将新语法转换为旧语法，引入babel的loader，具体配置看babel官网。
• 插件，用来扩展webpack的功能
• 命令行打包时加上--watch监视代码变化，并自动构建
• 为了更接近服务器环境，可以安装webpack-dev-server，并使用 yarn webpack serve，来完成服务器的创建，代码有变动时，自动刷新显示

vite

• webpack，开发和部署都需要打包，而且打包时间长；
• vite在开发时不对代码打包，采取ESM的方式来运行项目；部署时，再对项目打包；而且下载即可使用，无需配置。
• 默认源码目录为根目录，index.html引入js时，注意type=“module”，不需要写在src目录下，写哪都行，引入时路径没问题就行
• 打包后想看效果，需要服务器环境，或者使用yarn vite preview查看
• 可以使用 yarn creat vite，一键构建vite项目
• vite插件配置，在vite.config.js中编写，文件自己创建，使用浏览器的模块化而不是node的，因为vite做了配置。解决兼容性问题使用，plugin-legacy和terser