webpack入门学习（—）

一、webpack是什么？

  webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

二、webpack的优点

  1、模块化，支持commonJS和AMD模块。

  2、优化加载速度，通过配置打包多文件，有效利用浏览器的缓存功能提升性能。

  3、使用模块加载器，比如babel-loader加载器，可以使ES6打包成浏览器可以识别的代码。

三、webpack安装

  1、下载安装node https://nodejs.org/en/ 直接下一步。

  2、npm(package manager for JavaScript)node平台下JS依赖包管理工具。

  3、npm init 创建package.json文件,创建过程会让填以下信息，可以任意填写也可以一直回车。创建完成后可以看见目录下多了一个package.json文件

4、 npm install 包名称 -g全局安装

   npm update 模块名   更新模块

   npm uninstall 模块名 卸载模块

   npm install module-name -save 自动把模块和版本号添加到dependencies中

   npm install module-name -save-dev 自动把模块和版本号添加到devdependencies中

   npm install webpack -save-dev命令在packjson中devdependencies添加webpack模块，如下：

"devDependencies": {
    "webpack": "^3.1.0"
  }

三、使用webpack打包单个文件

  1、新建一个a.js，将其打包到bundle.js中，bundle.js可以手动建，也可以不建,webpack会自动创建。

  2、执行命令webpack a.js bundle.js可以看到当前目录js下自动创建了一个bundle.js

四、webpack打包多个文件

 1、新建 a.js, b.js内容分别如下:

  a.js里面就导出一个简单内容  

module.exports = ‘hello’;

  b.js里面内容如下：

var str = require('./a.js');
alert(str); 

 2、执行命令：webpack b.js bundle.js。这样就自动把a.js与b.js都打包到bundle.js中了。    

 3、最后在index.html中，我们就不需要引入多个js,只要调用bundle.js一个文件就行了。

五、安装模块加载器

  语法：npm install xxx-loader --save-dev

  常用：html、css、jsx、coffee、jade、less、sass、style等，其中css-loader、style-loader、html-loader 分别处理css文件和css样式以及html文件。

 修改b.js中require css部分，修改如下require("style-loader!css-loader!./css.css");  

 PS：注意这里style-loader!css-loader!是固定结构，代表后面文件使用这两个loader来处理。并且这两个loader的顺序必须如上所示，webpack从右向左使用loader.

 执行：webpack b.js bundle.js 命令，成功后访问index.html可以看到css起作用了。