Webpack使用详解(建议收藏!!!)

讲解

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. 图解：

******

分享不已,大家帮忙点赞收藏谢谢!!!!!!