WebPack概念及使用步骤

Scumbag乄
283 阅读3分钟

1.webpack-概念

目标

为何学webpack

什么是webpack

场景

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

1627289735578.png 1627289742417.png

概念

webpack官网

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

    • 静态: 文件资源

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

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

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

image-20210207234927772.png

小结

  1. 什么是webpack?

    • 静态模块打包器
    • 还能翻译和压缩代码
    • 减小代码包体积, 让浏览器更快速打开网页

2.webpack-使用前-准备

目标

用webpack, 需要准备什么

软件

webpack依赖Node环境

npm或yarn等模块管理工具

步骤

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

  1. 安装依赖包

    为何指定版本: 防止以后包更新, 造成课程内容报错

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
  1. 在package.json中, 配置scripts(自定义命令)
scripts: {
	"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
  1. 新建src/index.js导入使用
// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));
  1. 运行打包命令
yarn build

效果

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

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

(()=>{"use strict";console.log(7)})();
  1. 打包关系图

1627448159455.png

小结

  1. webpack如何使用?

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

4.webpack-更新打包

目标

代码变化, 如何打包

步骤

  1. 新建src/tool/tool.js - 导出数组求和方法
export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)
  1. src/index.js - 导入使用
import { addFn } from './add/add'
import { getArrSum } from './tool/tool'

console.log(addFn(5, 2));
console.log(getArrSum([5, 6, 9, 10]));
  1. 重新打包
yarn build

效果

  1. 自动覆盖原dist, 结果压缩极致
(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();

1627450857686.png

小结

  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"               // 出口"文件"名
    }
}
  1. 修改代码里src/index.js 为 src/main.js
  2. 重新打包观察输出文件名字

小结

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

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

  2. webpack默认配置文件名?

    • webpack.config.js

6.webpack-打包流程图

目标

运行yarn build发生了什么

图示流程

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

image-20210421125257233.png

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

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

1627471544248.png

小结

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

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

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

    • 模块文件要和webpack入口产生直接或间接引入关系
avatar
文章
阅读
粉丝