从本质上来讲, webpack是一个现代的JavaScript应用的静态模块打包工具。我的理解就是把一些文件翻译成浏览器可以识别的格式或者是把文件使用的各种模块化方案转成大部分浏览器可以识别的模块化方案。
安装webpack首先需要安装node.js，可以控制台运行node -v检查是否已经安装了node.js，未安装的可以参考我之前的文章“创新实训日志二”。 安装好node.js后，这里我们使用webpack3.6.0版本。
npm install webpack@3.6.0 -g-g 代表全局安装。安装好之后同样的方法检查版本号。
webpack -v 3.6.0整个项目的结构见文章结尾，方便理解。 新建项目并创建两个目录src和dist，src表示源码，用于开发；dist表示发布，用于正式发布。 在src下面创建mathUtils.js，定义两个函数：
function add(num1,num2){ return num2+num1 } function com(num1,num2){ return num2*num1 } //common.js模块化 导出 module.exports = { add, com }然后在项目目录下新建main.js，导入函数并通过控制台打印：
//common模块化规范 const {add,com} = require('./mathUtils') console.log('common模块化规范'); console.log(add(30, 20)); console.log(com(30, 20));接着控制台打开到项目目录，运行：
webpack ./src/main.js ./dist/bundle.js运行成功后会发现dist目录下多了个bundle.js文件,这就是经过webpack处理的可以被浏览器识别的文件。我们还需要把它引用。 然后在src下写一个index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--文件引入--> <script src="./dist/bundle.js"></script> </body> </html>然后用浏览器打开我们的index.html，可以看到函数成功运行：
为了显示webpack对各种模块化方式的转化，我们再使用ES6模块化方案，src下新建info.js：
//ES6模块化 export function sub(num1,num2){ return num1-num2 };main.js导入：
//common模块化规范 const {add,com} = require('./mathUtils') console.log('common模块化规范'); console.log(add(30, 20)); console.log(com(30, 20)); //ES6模块化规范 import {sub} from "./info"; console.log('ES6模块化规范'); console.log(sub(30,20));同样要运行webpack命令，然后浏览器打开index.html：
整个项目结构：
