webpack2.0介绍起步

webpack 是一个用来构建我们应用程序中的 JavaScript 模块的工具。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行自定义的优化配置，比如为生产环境拆分 vendor/css/js 代码，对图片进行base64转码，通过运行开发服务器（development server）来实现无刷新热重载（hot-reload）通过babel进行es6的转码，可以解析市面上很多预css编译等很多酷炫的特性。

我们先尝个鲜，创建一个示例来演示一下

因为现在是基于2.0的讲解，在开始前，先要确认你已经安装 Node.js 的最新版本。使用 Node.js 最新的 LTS 版本，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能或缺少相关 package 包。

如何安装npm我就不多说了，大家都知道的，网上的例子很多，这里就不多叙述了

注意

我们先全局安装一下通过
npm install webpack -g

安装好之后我们看一下webpack的版本
webpack --help || webpack -v 这里就会显示版本号如果是2.0以上的没有问题

如果以前在全局安装过的话请自己升个级
npm install webpack -g

我们来试着弄一个demo,本人用的是windows,打开cmd

mkdir wepback2.0 && cd webpack2.0

再生成一个package.json文件,这是一个存方说明的文件，以json的格式存放，每个字段都代表不同的含义，不懂的可以看这个阮大神的讲解http://javascript.ruanyifeng.com/nodejs/packagejson.html
先简单的初始化

npm init -y

建一个 app文件夹，再app里创建一个 index.js 文件。

app/index.js

function component () {
  var element = document.createElement('div');

  /* 需要引入 lodash，下一行才能正常工作 */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component())

我们在根目录下再创建一个Index.html
要运行这段代码，通常需要有以下 HTML ：

webpack2.0/index.html

在此示例中， - +

在这里，index.js 显式要求引入的 lodash 必须存在，然后将它以 _ 的别名绑定（不会造成全局范围变量名污染）。

通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图表，然后使用图表生成一个优化过的，会以正确代码顺序被运行的 bundle。并且没有用到的依赖将不会被 bundle 引入。

现在在此文件夹下带上以下参数运行 webpack，其中 index.js 是入口文件，bundle.js 是已打包所需的所有代码的输出文件。因为我们前面全局安装过了webpack，所以我们可以在任何盘下运行

webpack js/index.js dist/bundle.js
//js/index代表我们要打包的文
//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]

在浏览器中打开 index.html，查看构建成功后的 bundle 的结果。你应该能看到带有以下文本的页面：‘Hello webpack’。

你注意到在 app/index.js
中使用的 ES2015 模块引用（module import） 了吗？尽管 import/export
语句在浏览器中还未被支持，你也可以正常的使用，因为 webpack 会将其替换为 ES5 兼容的代码。你可以审查 dist/bundle.js 的代码来说服你自己放心使用。
注意 webpack 将不会更改你的 import/export
除外的代码。如果你在使用其它 ES2015 特性，确保你使用了一个像是 Babel 或 Bublé 的转译器。

使用带有配置的 webpack

对于更复杂的配置，我们可以使用一个配置文件，webpack 会参考它来打包代码。创建一个 webpack.config.js 文件后，你可以通过以下配置向 CLI 命令传达和前面一样的信息。

我们还是像在根目录下创建一个webpack.config.js
这个跟我们在cli命令行输入命令一下，后面webpack会通过解析这个文件来知道你所需要的配置

var path = require('path');   //这个是引入Node的path路径模块用来解析路径的
var webpack = require("webpack"); //引入webpack来进行

module.exports = {
  entry: './js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

配合 npm 使用

考虑到用 CLI 这种方式来运行 webpack 不是特别方便，我们可以设置一个快捷方式。像这样调整 package.json：

{
  ...
  "scripts": {
    "build": "webpack"  //我们能过package.json里的script脚本来进行启动
  },
  ...
}

现在你可以通过使用 npm run build 命令来实现与上面相同的效果。npm 通过命令选取脚本，并临时修补执行环境