1. Getting Started

当某个html需要引入多个js文件时，各js文件间可能存在依赖关系：

//  /src/a.js
funtion test(){
  ...
}

//  /src/b.js
test();

//  /dist/index.html
//  必须在b.js之前引入a.js, 否则test函数未定义
<script type="text/javascript" src="../src/a.js">
<script type="text/javascript" src="../src/b.js">

通过Webpack，在js文件内部的最开始处可以通过 import xx from 'xx' 的形式定义这种依赖，然后使用webpack打包出一个最终文件直接引用:

//  /src/a.js
export default function test() {
  ...
}

//  /src/b.js
import test from './a.js'
test();

// /webpack.config.js
const path = require('path');

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

//  /dist/index.html
<script type="text/javascript" src="bundle.js"></script>

在命令行执行 ./node_modules/.bin/webpack 可以运行webpack(可以通过config参数指定配置文件，默认使用webpack.config.js)。在 package.json 配置后可直接通过 npm run build 运行:

//  package.json
...
"scripts": {
  ...
  "build": "webpack",
  ...
},
...

2. Asset Management

除了js文件外，webpack通过各种loader能够处理css/pic/font等各种类型的文件。以css为例，在上一节的基础上，在 src 文件夹下新增 style.css 文件：

//  /scr/style.css
body{
  background: green;
}

npm install 一下需要的loader：

npm install --save-dev style-loader css-loader

修改webpack配置文件, 在module.exports中增加module：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
  }

在b.js中增加对该css的引用：

...
import './style.css'
...

执行 npm run build 后会在 /dist 下重新生成一个 bundle.js，该js会把css引入到使用了这个js的html中。

//  /dist/index.html和之前一样，仅做了一个引入bundle.js的行为
<script type="text/javascript" src="bundle.js"></script>

最后打开index.html，可以看到该css被自动载入到了 <head> 标签中