webpack的使用（1） ----简单快速入门

一：WebPack概念：
webpack是一个前端打包构建工具，主要功能是可以把.js,.css,.vue,.jsx等文件打包压缩到一块及实现自动刷新提高开发效率。也可以分别打包压缩。
作用： 例如我们网站有index.css, common.css每次打开网页都会向服务器发出两次请求，如果打包到一块可以只请求一次即可减轻服务器负担。
二：webpack需要在node平台的支持，因此我们要先安装node
1、下载安装node
https://nodejs.org/en/
或中文网下载都行
http://nodejs.cn/download/
2、npm命令应用
（1）node平台下的JS依赖包管理工具。（package manager for JavaScript）
什么是包？
答：软件集成包简称，模块，框架，库，工具都可以叫包。
（2）npm命令
① npm init 功能：创建package.json文件
② npm install 包名称
功能：这样就可以安装包了，安装过程都是自动化的具体细节不用操心。
常带参数如下：
npm install -g/–save-dev/–save
-g代表全局安装
–save和–save-dev可以省掉你手动修改package.json文件的步骤。
npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分
③ npm update 模块名称 功能：更新模块
④npm uninstall 模块名称 功能：卸载模块
三：开始使用webpack
npm install webpack –save-dev
安装后可以看到package.json里面多了以下内容
{
其他省略
“devDependencies”: {
“webpack”: “^2.2.1”
}
}
四：使用webpack来打包一个文件
1、新建一个打包前js假设：a.js内容很简单就一个
alert(‘hello world’);
2、新建一个打包后js文件：b.js,空文件，不建立也行，webpack会自动建立。
3、新建一个index.html
里面就一句话：引入打包后的js文件。

4、执行命令：
webpack a.js b.js //把a.js打包放入b.js中
5、运行index.html就可以看到，alert(hello world’);的结果。