Web 开发中的利器 - Webpack（3）Webpack 用法
|
- UID
- 1066743
|
Web 开发中的利器 - Webpack（3）Webpack 用法
Webpack 用法安装 Webpack
通过 npm 命令，全局安装
1
| $ npm install webpack -g
|
或者
1
| $ npm install webpack --save-dev
|
如果需要使用不同的版本 Webpack，可以
Webpack 命令
让我们以一个实例，来描述如何使用 Webpack 命令。假如，我们有下面的 js 文件
清单 6. cats.js1
2
| var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
|
清单7. app.js (Entry Point)1
2
| cats = require('./cats.js');
console.log(cats);
|
调用 Webpack 命令生成 output 文件
1
| webpack ./app.js app.bundle.js
|
Webpack 通过分析 entry point 文件，发现并找到文件所依赖的所有模块，然后将它们归集在一起，形成最终的 output 文件 - app.bundle.js。下面的图形，描述了它的具体执行过 (Entry Point 可以理解成程序的起始点，而 Webpack 也是从这里来分析模块间的依赖关系的。)
图 2. Webpack 命令的执行过程 除了使用命令行来调用 webpack 外，还可以通过配置文件的形式。那麽，接下来我们就来说说如何配置 webpack 。
Webpack 的配置webpack.config.js 是 webpack 的默认配置文件（也可以通过--config 配置其他文件）。
清单 8. webpack.config.js1
2
3
4
5
6
| module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
|
或者多个 Entry point
清单 9. 配置多个 Entry point1
2
3
4
5
6
7
8
9
10
| module.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // Template based on keys in entry above
}
};
|
Webpack 的配置文件其实是一个 CommonJS 形式的 javascript 文件。
Webpack 中的 loader
图 3. 通过 babel-loader, 提供了对 ES6 语言的支持 清单 10. 使用 babel-loader1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.coffee$/,
loader: 'coffee-loader' },
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
|
还有其他的一些 loader,比如可以通过使用 json-loader，将 JSON 文件转换成 CommonJS 模块
图 4. json-loader 的执行过程 Loader 的调用是连续的。Webpack 提倡一个 loader 只完成与它相关的任务，或者单一的任务。我们可以通过组合的形式将多个 Loader 连接起来。
例如，通过用 yaml-loader 先将 YAML 文件转换成 JSON 格式，再通过 json-loader，转换成 CommonJS 模块
图 5. 连接多个 loader 的执行过程 编译 css, image, font 等资源文件
通过使用 style-loader, url-loader ，可以将 css , image , font 等资源文件编译成为 javascript 模块。例如
清单 11. 使用 style-loader / url-loader1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| module.exports = {
entry: './main.js',
output: {
// This is where images AND js will go
path: './build',
// This is used to generate URLs to e.g. images
publicPath: 'http://mycdn.com/',
filename: 'bundle.js'
},
module: {
loaders: [
// use ! to chain loaders
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
// inline base64 URLs for <=8k images, direct URLs for the rest
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}
]
}
};
|
生成 chunk 文件
使用 CommonsChunkPlugin ,我们可以将应用中被多次引用到地文件或者方法，提取到一个文件中来
1
2
3
4
5
6
7
8
9
10
11
12
13
| var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // Template based on keys in entry above
},
plugins: [commonsPlugin]
};
|
|
|
|
|
|
|
