webpack文档: 概念 | webpack 中文文档
1. 什么是webpack?
概念: 静态模块打包工具
本质: node环境, 第三方模块包 (nodejs代码)
2. 使用
前提: node+npm/yarn 软件环境
初始化包环境 yarn init 得到package.json文件 记录你下的
下载webpack模块 yarn add webpack webpack-cli
配置自定义命令 scripts: { "build": "webpack"}
编写逻辑代码 必须在src/入口js文件内, 直接/间接 引入关系才会被打包
执行yarn build 打包后的代码放到dist/
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
效果
-
src并列处, 生成dist目录和main.js文件
-
查看main.js文件, 是打包压缩后的代码
-
(()=>{"use strict";console.log(7)})();
4. 打包关系图
1. 新建src/tool/tool.js - 导出数组求和方法
export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)
2. src/index.js - 导入使用
import { addFn } from './add/add'
import { getArrSum } from './tool/tool'
console.log(addFn(5, 2));
con