Webpack 2 起步

虽然和 webpack1 一样, 还是过一遍

创建一个 bundle

mkdir webpack-demo && webpack-demo

npm init -y

yarn add --dev webpack@beta

yarn add lodash
`</pre>

#### 创建 app/index.js

<pre>`// app/index.js
import _ from 'lodash'
function component () {
  let element = document.createElement('div');

// use lodash
  element.innerHtml = _.join(['Hello', 'webpack'], ' ')

  return element
}

document.body.appendChild(component())
`</pre>

#### 创建 index.html

<pre>`&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;webpack 2 demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src="public/bundle.js"&gt;&gt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
`</pre>

#### 创建打包后文件

<pre>`./node_modules/.bin/webpack app/index.js public/bundle.js
`</pre>

webpack 会自动处理包的依赖关系

### 添加配置文件

<pre>`var path = require('path')

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  }
}
`</pre>

通过 webpack 命令行进行打包

<pre>`webpack --config webpack.config.js
`</pre>

`webpack` 会默认执行名为 `webpack.config.js` 的配置文件, 因此仅输入`webpack` 即可进行打包

### 通过 yarn 执行打包

在 `yarn init` 生成的 `package.json` 中添加

<pre>`{
  ...
  "scripts": {
    "build": "webpack"
  }
  ...
}

即可将webpack指令添加进 yarn 的快捷方式, 此时执行 yarn build 即可打包