Webpack系列(一)：初步使用Webpack

一、为什么要使用Webpack？

• 随着前端工程越来越复杂，单独写几个文件来写业务代码，这样的方式已经无法保证项目的可维护性了，所以我们就想把不同的业务逻辑拆成模块然后去分开引入这些模块，每个模块自己做自己的事情。这样就可以保证项目地维护性和可扩展性了！
• 但假如你有几千个模块，那你能在页面上引入几千个js文件吗？所以当项目大到这种程度的时候，我们就得借助工具来管理我们的这些模块了！
• 而Webpack就是可以帮助我们管理复杂项目的一个工具。
• 与Webpack类似还有很多相似的工具，比如说Gulp，Grunt，Browserify等等
• 但是这几年，Webpack的使用率直线上升，比如说Vue，React，Angular三大框架的脚手架工具都开始使用它来做底层代码的构建，这得益于Webpack可以提供其他工具无法实现的一些特性，比如说Tree shaking，代码懒加载，code splitting 也就是代码分割，等等。

所以现在来说，用Webpack做代码管理的工具已经是越来越多前端开发者的共识了！！！！

二、Webpack是什么？

Webpack就是一个模块打包工具，让我们可以把复杂的程序细化为小的文件

最开始只是针对js来进行打包，后来随着版本的不断的更新，它不仅仅只是js的打包工具了，它还能够打包css文件，scss，lsee等css预处理器``img图片等等，可以说它可以打包你任何想要打包的工具。

三、如何简单地使用Webpack？

1.在当前项目目录 package.json配置文件，初始化我们的项目

通过命令初始化package.json的时候，终端会出现一些询问，比如项目名称，项目的描述，作者的信息等等，直接一路回车就行

npm init	// 初始化项目 生成package.json文件

这时候会发现目录下有了一个package.json文件

2. 通过npm 或cnpm 安装 webpack

//全局安装 webpack
npm install -g webpack

//本地安装 安装到当前项目目录，下载到开发环境里
npm install --save-dev webpack	
npm install --save-dev webpack-cli	

// 注意webpack-cli最好不要全局-g安装，否则如果有两个webpack项目的话会出现一些问题	

3. 创建dist目录，用来生成打包后的文件，比如我在dist文件夹里创建了一个index.html