Webapck学习概览

根据Webpack官方文档进行的总结

1. Getting Started

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

1
2
3
4
5
6
7
8
9
10
11
12
//  /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打包出一个最终文件直接引用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//  /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 运行:

1
2
3
4
5
6
7
8
//  package.json
...
"scripts": {
...
"build": "webpack",
...
},
...

2. Asset Management

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

1
2
3
4
//  /scr/style.css
body{
background: green;
}

npm install 一下需要的loader:

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

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

1
2
3
4
5
6
7
8
9
10
11
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}

]
}

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

1
2
3
...
import './style.css'
...

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

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

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

本文首发于http://www.miaoyunze.com/,转载请注明出处