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’);的结果。