如何使用webpack？

当今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能                           JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

什么是webpack？

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack已经是大部分前端项目打包工具的首选，grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。在grunt、glup、browserify等已经相当火了之后，webpack长江后浪推前浪，把前辈们拍死在沙滩上，实力惊人。

可以毫不夸张的说，webpack已经是你下山行走江湖，叱咤风云的必备技能。

webpack2入门

安装

npm install webpack -g

npm install webpack@< version> --save-dev

创建一个 bundle 文件

mkdir webpack-demo && cd webpack-demo

npm init -y

npm install --save-dev webpack

查看帮助：

.\node_modules\.bin\webpack --help # windows 用户请使用此路径

现在在 app 子目录下创建一个 index.js 文件。

function component () {

var element = document.createElement('div');

/* 需要引入 lodash，下一行才能正常工作 */

element.innerHTML = _.join(['Hello','webpack'], ' ');

return element;

}

document.body.appendChild(component());

在 index.js 中打包 lodash 依赖，首先我们需要安装 lodash。

npm install --save lodash

然后 import lodash。

+ import _ from 'lodash';

function component () {

...

同时还要在刚刚创建的html文件中引入bundle文件

< script src="dist/bundle.js"></scipt>

现在在此文件夹下运行 webpack，其中 index.js 是输入文件，bundle.js 是输出文件，输出文件已打包此页面所需的所有代码。

./node_modules/.bin/webpack app/index.js dist/bundle.js

Hash: ff6c1d39b26f89b3b7bb

Version: webpack 2.2.0

Time: 385ms

Asset    Size  Chunks                    Chunk Names

bundle.js  544 kB       0  [emitted]  [big]  main

[0] ./~/lodash/lodash.js 540 kB {0} [built]

[1] (webpack)/buildin/global.js 509 bytes {0} [built]

[2] (webpack)/buildin/module.js 517 bytes {0} [built]

[3] ./app/index.js 278 bytes {0} [built]