webpack基本概述

• 支持所有类型文件的打包
• 支持less/sass => css
• 支持ES6/7/8 => ES5
• 可以压缩代码, 提高加载速度

webpack使用步骤

1.环境准备

1. 在项目文件根目录打开终端并初始化包环境（得到package.json文件）

   执行命令：npm init -y

2. 下载安装webpack模块包

   执行命令：npm install webpack webpack-cli -D

3. 在package.json文件中的scripts里配置 (自定义命令)

    "scripts": {
       "build": "webpack",
     },
   

2.基础使用

需求：将两个js文件打包成1个js文件

1. 新建src/add/add.js文件，定义一个函数并用export导出

   export function add(a,b){
       return a+b
   }
   

2. 在src新建index.js文件，用 import { } from “模块路径” 引入add模块并使用函数输出结果

   //导入需要合并的文件路径
   import{add}from "./add/add"
   //合并代码时需要调用到需要用到的代码，否则不会合并
   console.log(add(1,6));
   

3. 执行 npm run build 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)

4. 打包后默认生成dist文件夹和main.js文件

》》》

3.webpack再次打包

需求：代码增加了需要再次打包

1. 同上一步，在src文件夹中新建tool/tool.js文件，定义一个函数并用export导

   export function fum(){
       let arr1=[1,2,3]
       let arr2=[4,5,6]
       let res=[...arr1,...arr2]
       let sum=0
       res.forEach(i=> {
           sum+=i
       });
       return sum
   }
   

2. 在src新建index.js文件，用 import { } from “模块路径” 引入刚创建的tool模块并使用函数输出结果

   import{fum}from "./tool/too"
   console.log(fum);
   

3. 执行 npm run build 自定义命令, 进行打包即可实现两个js文件打包一起在一个js文件中 (确保终端路径在src的父级文件夹)

4. 打包后新增的会代码追加到dist文件夹的main.js文件中 》》》