webpack 的基本使用

提示：webpack 的基本使用

---

前言

先来个自我提问环节？
1.我们为什么要学习webpack？
2.什么是webpack？作用是？目的是？

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack是什么？

示例：简单来说，它就是一个Node的第三方模块。
作用是识别代码，翻译，压缩，整合打包，和提高打开网站的速度。

二、基本使用步骤

1.webpack-概念

场景
开发完项目, 可以用node+webpack来分析, 翻译, 压缩, 打包, 用来加快浏览器打开速

概念
webpack官网

现代 javascript 应用程序的 静态模块打包器 (module bundler)

• 静态: 文件资源
• 模块: node环境, 引入文件, 遵守模块化语法

除了合并代码, 还可以翻译和压缩代码

• less/sass -> css
• ES6/7/8 -> ES5
• html/css/js -> 压缩合并
  

2.webpack-使用前-准备

用webpack, 需要准备什么?（目标）：

软件

webpack 依赖 Node环境

npm 或 yarn 等模块管理工具

步骤

1. 创建Day01_webpack基础使用文件夹
2. 初始化包环境

yarn init    【推荐使用：yarn init -y （一步到位)】
或
npm init      同理：npm init -y

3. 安装依赖包

   为何指定版本: 防止以后包更新, 造成下面案例报错

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D

4. 在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

这里修改配置，是为了yarn build 或者 npm run build （实际是项目环境webpack命令）

小结

1. 使用webpack前, 准备什么?

Node环境软件
npm或yarn模块管理器
项目文件夹和包环境
下载webpack并配置命令

3.webpack-基础使用

学习 webpack 使用, 打包2个 js 文件（示例）：

步骤

1. 新建 src/add/add.js - 定义求和函数导出

export const addFn = (a, b) => a + b

2. 新建 src/index.js 导入使用

// webpack 打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));

3. 运行打包命令

yarn build
或
npm run build

效果

1. src 并列处, 生成 dist 目录和 main.js 文件

2. 查看 main.js 文件, 可以看到是打包压缩后的代码

(()=>{"use strict";console.log(7)})();

3. 打包关系图
   

小结

1. webpack如何使用?

先下载安装webpack, 配置打包命令 默认入口src/index.js-要被打包的文件, 要引入到这里使用 输入yarn
build打包命令(实际是项目环境webpack命令) 输出代码到dist/main.js中

4.webpack-更新打包

代码变化, 如何打包（示例）：

修改完毕代码后，再次执行下面代码，即可跟新打包

yarn build

小结

1. 代码更、删、修、改后，如何打包?

要和 src/index.js 有直接或间接的引入关系（必须要建立联系）
重新执行 yarn build

5.webpack-配置修改

修改默认: 入口和出口
默认入口: src/index.js
默认出口: dist/main.js（示例）：

步骤

配置文档

1. 项目根目录 - 新建 webpack.config.js 文件 (默认配置文件名)
2. 填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}

3. 修改代码里 src/index.js 为 src/main.js
4. 重新打包观察 输出文件名 字

小结

1. webpack默认入口和出口是什么?

默认入口src/index.js
默认出口dist/main.js

2. webpack默认配置文件名?

webpack.config.js

6.webpack-打包流程图

运行yarn build发生了什么（示例）：

图示流程

1. 敲击命令, 代码执行过程
   

2. 代码源文件和webpack之间关系图

   源码一定要和入口产生直接/间接引入关系, 才会被一起打包

小结

1. 简述总结下打包流程?

执行局部webpack命令(前提项目中下载了webpack包)
有webpack.config.js用, 否则用内置默认
根据入口建立引入关系
编译翻译整合打包输出到指定位置

2. 模块想要被webpack识别打包, 要注意什么?

模块文件要和webpack入口产生直接或间接引入关系

---

总结

模块文件一定要和 webpack入口文件 产生直接或间接引入关系

由于 webpack 只认识 js , 所以如果需要处理其他文件(js之外的文件）
就需要用 webpack 处理 htm css less 图片 字体 对高版本js语法降级等，建议去，官方文档，步骤清晰！ webpack官网