webpack 初玩


:+1:  [check repo here:](https://github.com/xiangzhuyuan/webpack-abc)
####安装它

>node 环境准备

```
npm install -g webpack
```

####使用

```
#我们创建一个项目, 也就是一个文件夹了

mkdir webpack-study
cd webpack-study
npm init
# ...

touch cats.js touch index.js
```

```cats.js
var cats = ['dave', 'henry', 'martha', 'a new one'];
module.exports = cats;
```


```index.js

cats = require('./cats.js');
console.log(cats);
```

然后

```
webpack index.js index.min.js
```

这样我们就得到一个` index.min.js` 的文件, 然后执行它看看输出什么

```
node index.min.js
```

结果输出:


```
➜  webpack-study  node index.min.js
[ 'dave', 'henry', 'martha', 'a new one' ]
```

讲真, 上面都算不上 webpack 的皮毛, 作为一个功能丰富的家伙,只是通过 cli 就能玩到?还是来看看正儿八经的 webpack 项目吧. 通常我们是通过一个配置文件来使用 webpack 的.

###项目结构

通常我们会把源文件和` bundle` 后的文件放在不同的文件夹里. 如我们通常把源代码各个 module 放在` src` 下面,然后指定bundle 的文件到` bin` 下面.像这样:

![Kobito.H1o0XU.png](https://qiita-image-store.s3.amazonaws.com/0/56713/c92e4a7a-bb13-6aab-1a02-c35794e70a00.png "Kobito.H1o0XU.png")

1. 第一步我们在刚才的文件夹下面创建

```
mkdir src bin
```

2. 然后把 js 文件移动到 src 里

```
mv *.js src
```

3. 初始化一个 node 项目

```
npm init( 已经完成)
```

4. 安装 webpack

```
npm install --save-dev webpack
```

5. 创建一个配文件

> touch webpack.config.js


```
module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js'
     }
 };
```

6. 试着跑一下` webpack`
7. 看看效果


接着我们试试其他的.

### 使用 loader
通常默认webpack 就只支持 javascript 了. 而通过使用一些插件我们同样可以处理其他的文件, 如ES2015, CoffeeScript, TypeScript 等.

`Loaders` 是特殊的 webpack 模块, 它被用来加载其他的模块(用其他语言书写)到 js 的运行环境里.如:

`babel-loader` 就是用来处理 `ES2015`的文件的.
![Kobito.uLeTfF.png](https://qiita-image-store.s3.amazonaws.com/0/56713/374cc26e-9fa7-51dc-d723-9e48d49e883a.png "Kobito.uLeTfF.png")
`json-loader` 就是用来处理` json` 文件的
![Kobito.pdPUBR.png](https://qiita-image-store.s3.amazonaws.com/0/56713/c92951a1-3cab-7e99-fa4c-ac55d95db938.png "Kobito.pdPUBR.png")


而且不同的` loader` 之间是可以串联的, 如你可以用` yaml-loader`把 `yaml` 文件转换为` json`, 然后再用 `json-loader` 转为` js  module`

![Kobito.ntcTIu.png](https://qiita-image-store.s3.amazonaws.com/0/56713/900705e5-b367-ee39-240e-776a4a4f362e.png "Kobito.ntcTIu.png")


###让我们用`babel-loader` 来转换下` ES2015`.

```

//先安装 babel-core和 babel-reset-es2015
npm install --save-dev babel-core babel-preset-es2015

// 然后安装 babel-loader:
npm install --save-dev babel-loader

```

然后添加一个`.babelrc` 的配置文件.  

```
 { "presets": [ "es2015" ] }
```

然后编辑这个 config 文件,来告诉 babel-loader,

```

 module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js',
     },
     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
         }]
     }
 }
 
 
```

同样,我们可以追加一些其他想用的

```
 npm install --save jquery babel-polyfill
 
```

> 这里我们使用了`-- save` 来替代`--save-dev`因为他们都是在运行时使用而非开发时, 还有就是通过` babel-polyfill` 我们可以让这些代码在老浏览器里也能跑

我们回过头来重新编辑` src/index.js` 文件,追加一些机能进去:

```
 import 'babel-polyfill';
 import cats from './cats';
 import $ from 'jquery';

 $('<h1>Cats</h1>').appendTo('body');
 const ul = $('<ul></ul>').appendTo('body');
 for (const cat of cats) {
     $('<li></li>').text(cat).appendTo(ul);
 }

```

干了什么呢, 就是追加了点 html 内容输出到 body 里. 然后我们添加一个 html 文件,应用` bin` 下面我们通过 webpack 生成的那个` index.min.js`文件.

通过

```
webpack
```

或者在开发时, 我们直接通过`- w` 参数来一直监视这些文件就好了,这样每次改动文件 webpack 就会自己去编译他们..

```
open index.html
```
看看效果

![Kobito.pNXjGm.png](https://qiita-image-store.s3.amazonaws.com/0/56713/74ed394c-898d-e7b6-8b9d-5ab74897df78.png "Kobito.pNXjGm.png")


###如何使用插件

平时我们在部署前可以会压缩资源文件的, 或者加入一些定制的工序在我们的工作流里, 这个时候就需要配置到 config 文件里的. 我们可以这样修改一下:


```

const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: './bin',
        filename: 'index.min.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}


```


ref:

1. http://webpack.github.io/docs/tutorials/getting-started/
2. http://webpack.github.io/docs/usage.html