1. webpack简介

一、webpack简介

---

1.webpack是什么？

webpack是前端项目打包工具，在nodejs环境中运行，通过配置webpack.config.js文件结合命令行实现前端项目的自动化打包构建工作

2.webpack简单工作原理

webpack在处理打包时，会根据webpack.config.js文件中定义entry字段找到入口文件（我更喜欢称作为打包起点的文件），从这个入口文件开始，自动根据各个文件中的类似import xx from 'xx'、let xx = require('xx')、@import 'xx'等这样的语句，构建一个依赖图，从而按照依赖关系将各个文件作为模块打包，最后在webpack.config.js定义的output字段中找到要创建的出口文件，并填充进去。

假设项目根目录为ONE，演示代码如下

ONE/webpack.config.js

let path = require('path') // nodejs内置路径解析模块

module.exports={
  entry:'./src/index.js', // 入口
  output:{
    path:path.resolve(__dirname,'dist'), // __dirname为上级目录即ONE,这里解析后路径为ONE/dist
    filename:'bundle.js' // 打包构建后输出文件为 bundle.js 位于ONE/dist路径下
  }
}

ONE/src/index.js

import {add} from './utils.js'

add(1,2)

ONE/src/utils.js

function add(a,b){
  console.log(a,b)
}
export{
  add
}

ONE/package.json

// 定义webpack脚本命令
"scripts":{
  "build":"webpack"
}

在根目录下执行以下命令

npm run build

这时会启动webpack打包进程，根据entry找到入口文件src/index.js，构建依赖图，遍历所有依赖文件（这里演示的只有一个依赖文件即src/utils.js），根据依赖关系打包输出为最终的dist/bundle.js