webpack介绍及简单安装

webpack

代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布

安装

安装本地的 webpack
webpack webpack-cli -D

本地安装：npm install webpack@3.6.0 --save-dev

打包：

1. webpack ./src/main.js ./dist/bundle.js

webpack 模块化打包 为了可以正常运行，必须依靠 node 环境

webpack 可以进行 0 配置

打包工具-> 输出后的结构(js 模块)

webpack 和 grunt/gulp 的对比

1. grunt/gulp 的核心是 task
   1. 我们可以配置一系列的 task，并且定义 task 要处理的事务(例如：ES6、ts 转化、图片压缩、scss 转成 css)
   2. 之后让 grunt/gulp 来一次执行这些 task，而且让这呢跟个流程自动化
   3. 所以 grunt/gulp 也被称为前端自动化任务管理工具
2. 什么时候用 grunt/gulp 呢？
   1. 如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念
   2. 只需要进行简单的合并、压缩、就是用 grunt/gulp 即可
   3. 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的 webpack 了
3. grunt/gulp 和/webpack 有什么不同？
   1. grunt/gulp 更加强调的是前端流程的自动化，模块化不是它的核心
   2. webpack 更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能