webpack学习总结（1）

一、webpack与grunt/gulp

1.grunt/gulp

核心是task（配置一系列task，依次执行task使整个流程自动化），被称为前端自动化任务管理工具。

应用场景：工程模块依赖简单，只进行简单的合并、压缩

2.webpack与grunt/gulp的区别

grunt/gulp更加强调前端流程的自动化，模块化不是核心

webpack更加强调模块化开发管理，比grunt/gulp更强大。

二、webpack

1.是个前端模块化打包工具；依赖node环境

2.安装node环境和webpack（全局和本地）

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

3.disk文件夹：所有打包的东西都放在这个文件夹中；src文件夹：开发的内容

4.所谓模块化开发：

这里的main.js就是启动的js文件，通过webpack ./src/main.js ./dist/bundle.js这个命令 打包bundle文件，在index.html中直接引用bundle.js。（在js文件过多的情况下，模块化开发更加方便）

 5.webpack.config.js和package.js的配置

新建webpack.config.js文件