Webpack构建工具(2023-1-4)第一章：构建工具第二章：Webpack配置文件

63 阅读 0 评论 42 点赞

我是靠谱客的博主哭泣草莓，最近开发中收集的这篇文章主要介绍Webpack构建工具(2023-1-4)第一章：构建工具第二章：Webpack配置文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一章：构建工具

1.构建工具

	当我们习惯了在node中编写代码的方式后 在回到前端编写JavaScript html这些东西会感到各种不方便  浏览器的兼容性问题 即使可以模块化规范也会面临着模块过多的加载问题

迫切的希望有一款工具可以对代码进行打包  将多个模块打包为一个文件 这样一来就解决看兼容性问题 又解决了模块过多的问题

构建工具就起到了这样的一个作用 通过构建工具可以使用esm规范编写的代码转换为旧的js语法 这样可以使的所有的浏览器可以支持代码

2.Webpack

使用步骤：
	1.初始化项目  终端输入：npm init -y
	2.安装工具  Webpack  Webpack-cli  终端输入npm add -D webpack  webpack-cli

	3.在项目中创建src目录  然后再src目录中编写代码（index.js）
	
	4.书写完成后  终端输入npx  webpack  完成打包



Webpack配置文件：Webpack.config.js

第二章：Webpack配置文件

1.常用的方法依赖

/*


entry:表示入口文件  参数是一个文件路径





* */


module.exports={
    mode:"production",//设置打包模式 production表示生产模式 development表示开发模式
    entry:"./hello/hello.js",//用来指定打包时的主文件  默认 ./src/index.js  传入的参数可以是数组 可以是对象
        output:{
        //配置代码打包后删除的地址
            path:"",//指定打包的目录  必须要绝对路径
            filename:"build.js",//打包完成后的文件名称
            clean:true,  //自动清理打包目录
        },
    /*
    * Webpack默认情况下 只会处理js文件 如果我们希望它可以处理其他类型的文件 则要为其引入loader
    *           以css为例：
    *                       --使用css-loader可以处理js中的样式
    *                       --使用步骤：
    *                   1.安装：npm add css-loader -D
    *                   2.配置：module:{
    rules:[
        {
            test:/.css$/i , //匹配以css结尾的
            use:"css-loader"
        }
    ]
}
    *
    *
    * 使用各种类型的文件  需要配置后各种对应的loader
    *
    * */

module:{
    rules:[
        {
            test:/.css$/i , //匹配以css结尾的
            use:"css-loader"
        }
    ]
}


}

/*
* 在编写js代码的时 经常需要使用一些js中的新特性  二新特性在旧的浏览器中兼容性并不好  此时旧导致我们无法使用一些新的特性
*       我们下载就需要使用新的特性  我们可以采用折中的方案 引入使用新的特性编写代码  但是代码编写完成时候 我们可以通过一些工具将
* 新的代码转换为旧代码
*
*       babel：将性的js语法转换为旧的js 提高代码的兼容性
*       在Webpack中使用babel  需要在Webpack中引入
*
*
*       使用步骤：
*           1.安装        npm install -D babel-loader @babel/core @babel/preset-env
*           2.配置
*           3.在package.json中设置兼容列表
*
*               "browserslist":[  defaults  ]
*
* */



/*
*
* 插件： 插件用来为Webpack扩展功能
*       html-Webpack-plugin  这个插件可以在打包代码后  自动在打包目录生成html页面
*           使用步骤：
*               1.安装依赖  npm add -D html-webpack-plugin

*               2.配置插件
* */

2.Vite使用

前端构建工具：vite  相较于Webpack vite采用了不同的运行方式
		在开发时 并不对代码打包  而是直接采用esm的方式来运行项目
		在项目部署时在对项目进行打包
		除了速度外 vite使用起来也比较方便  
		
		使用步骤：
				1.终端输入npm add -D vite 安装开发依赖
				2.输入npx vite
				3.vite的源码目录就是项目根目录
				
				
				使用命令构建：
					npm create vite@latest
					npx create vite
					pnpm create vite