讲解
1. Webpack 是一个静态模块打包工具,从入口构建依赖图,打包有关的模块,最后用于展示你的内容
2. 静态模块:编写代码过程中的,html,css, js,图片等固定内容的文件
3. 打包过程,注意:只有和入口有直接/间接引入关系的模块,才会被打包
4. Webpack 的作用:把静态模块内容,压缩,这个和,转译等(前端工程化)
< Webpack 的作用:把静态模块内容,压缩,这个和,转译等(前端工程化)
< 把 ES6+ 降级成 ES5 等
< 支持多种模块文件类型,多种模块标准语法
5. 为何不学 vite?
现在很多项目还是基于 Webpack 来进行构建的,所以还是要掌握 Webpack 的使用
***使用步骤***
1. 新建项目文件夹 Webpack_study,初始化包环境,得到 package.json 文件
npm init -y
2. 新建 src 源代码文件夹(书写代码)包括 utils/check.js 封装用户名和密码长度函数,引入到 src/index.js 进行使用
*** src/utils/check.js
/**
* 目标:封装检验用户名和密码长度的函数
*/
export const checkUserName = uname => {
return uname.length >= 8
}
export const checkPassWord = pwd => {
return pwd.length >= 6
}
export default {
checkUserName,
checkPassWord
}
***src/index.js
/**
* 目标:引入工具函数使用
*/
import { checkUserName, checkPassWord } from './utils/check.js'
const unameResult = checkUserName('itheima007')
const pwdResult = checkPassWord('7654321')
console.log(unameResult, pwdResult)
3. 下载 webpack webpack-cli 到项目(版本独立)
npm i webpack webpack-cli --save-dev
注意:虽然 webpack 是全局软件包,封装的是命令工具,但是为了保证项目之间版本分别独立,所以这次比较特殊,下载到某个项目环境下,但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令,作为局部命令使用
4. 项目中运行工具命令,采用自定义命令的方式(局部命令)
npm run build
npm run 自定义命令名字
注意:实际上在终端运行的是 build 右侧的具体命名
5. 自动产生 dist 分发文件夹(压缩和优化后,用于最终运行的代码)
***需求最终流程图 ***
***下面就是修改 Webpack 打包入口和出口
1. Webpack 配置 :影响 Webpack 打包过程
2. 步骤:
< 项目根目录,新建 Webpack.config.js 配置文件
< 导出配置对象,配置入口,出口文件路径
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src/main.js'), // 入口
output: { // 出口
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
clean: true // 先清空 dist,然后再输出最新内容
}
}
<. 重新打包观察
3. 图解:
******
分享不已,大家帮忙点赞收藏谢谢!!!!!!