什么是WebPack,WebPack有什么作用

1.前端模块化： 

前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发）。 

ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将其进行整合打包。 

此时出现webpack，其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。 

而不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。 

2.打包如何理解： 

webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就很好理解了。 

就是将webpack中的各种资源模块进行打包合并成一个多个包（Bundle） 。

并且在打包的过程中，还可对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。 

打包工具还有grunt/gulp 

3.WebPack的安装 

wepack为了正常运行必须依赖node环境，而node环境为了可以正常的执行，必须使用npm工具管理node中各种依赖的包）。 

因此安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm。 

全局安装webpack（npm install webpack@3.6.0 -g）。 

局部安装webpck（npm install webpack@3.6.0 --save-dev）–save-dev是开发时依赖，项目打包后不需要继续使用。 

4.WebPack的配置 

4.1 文件和文件夹解析 

dist文件夹：用于存放之后打包的文件 。

src文件夹：用于存放我们写的源文件 。

main.js：项目的入口文件。 

mathUtils.js:定义了一些数学工具函数，可以在其他地方引用，并且使用。 

index.html: 浏览器打开展示的首页html（在这里引用的是src内最终打包的文件即dist文件夹 。

4.2 命令 

webpack ./src/main.js ./dist/bundle.js(将main.js文件打包成bundle.js文件) 

说明：同理，也可以使用ES6的模块化规范。 

4.3、创建webpack.config.js文件简化打包命令 

（将打包命令映射为打包入口和出口） 

该文件中的代码： 

entry: 为打包的入口 

 output： 为打包的出口 

 output中的path我们需要动态获取， 因此我们可以使用Node.js语法导入一个模块这个模块为path（const path = require（‘path’）引号内的文件是需要在node包里面找到）。 

通过npm init命令 （初始化）使用node.js 

之后生成package.json文件（该文件描述当前项目的信息）license：“ISC”(为项目开源),以下为package.json的代码。 

说明：如果想使用node，必须依赖于package.json文件。 

运行npm install webpack@3.6.0 --save-dev之后，增加了依赖如下。

 4、将webpack命令映射npm run 

除了将webpack映射入口，出口之外，还可以将webpack命令映射为npm run 一些操作（需要在package.json内**“script”** 脚本标签中修改）。 

总结: 

 webPack将代码拆分下来，代码拆分 — 形成项目依赖树，每个依赖都可拆分成一个模块，进行按需加载，快速高效 – 开发配置可以选择不同环境的配置模式，可选择的打包文件，使用异步 I/O 和多级缓存提高运行效率功能全面 — 最主流的前端模块打包工具，社区全面。天津天迅达科技有限公司开发人员使用WebPack极大的提高了开发效率。

以上所有设计图和部分文字均来自网络，如有侵权，请call我删除，感谢~

天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索，已经帮助每一个客户快速开发出属于自己的APP、小程序、网站，是万千企业之选。