概念

首先从官网抄过来：

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

看起来挺深奥的，我个人理解就是把各种资源最后打包成js文件，然后占的内存还变小了。

实操

直接上代码，先在src目录下面创建一个index.js文件

/**
 * 运行命令：webpack ./src/index.js -o ./build/built.js --mode=development
 * 
 */

function add(x,y){
    return x+y
}
console.log(add(2,3))

首先，需要使用npm install webpack webpack-cli -g在全局中下载相应的依赖

然后再使用npm init 初始化工程

构建完工程之后，将这个实例编写以后就可以打包测试了。测试的时候，只需在html页面中引入对应的js文件就可以了。