2019-12-01 16:22:51 +08:00
|
|
|
# webpack
|
|
|
|
|
> 这是个人学习webpack笔记
|
2019-12-01 16:23:51 +08:00
|
|
|
## 概念
|
|
|
|
|
webpack是一个静态文件打包器
|
2019-12-01 16:25:51 +08:00
|
|
|
他会递归生成一个依赖树 然后生产呢个一个或多个包(bundel)
|
2019-12-01 16:26:51 +08:00
|
|
|
#### 需要了解四个概念
|
2019-12-01 16:25:51 +08:00
|
|
|
1. 入口
|
|
|
|
|
2. 输出
|
|
|
|
|
3. loader 加载
|
2019-12-01 16:26:51 +08:00
|
|
|
4. 插件
|
|
|
|
|
|
|
|
|
|
## 入口
|
2019-12-01 16:29:51 +08:00
|
|
|
入口是指webpack应在那个文件开始处理依赖图
|
2019-12-01 16:32:51 +08:00
|
|
|
然后输出到一个叫bundles(包)文件中
|
2019-12-01 18:23:51 +08:00
|
|
|
可以使用entry属性 定义入口
|
2019-12-01 18:24:51 +08:00
|
|
|
module.exports = {
|
|
|
|
|
entry: './path/to/my/entry/file.js'
|
|
|
|
|
};
|
2019-12-01 16:29:51 +08:00
|
|
|
|
2019-12-01 18:24:51 +08:00
|
|
|
## 出口
|
2019-12-01 18:25:51 +08:00
|
|
|
出口是告诉webpack将所打包成功的 bundel输出到哪个位置 以及如何命名
|
|
|
|
|
默认为./dist
|
2019-12-01 18:26:51 +08:00
|
|
|
可以使用output定义
|
|
|
|
|
const path = require('path');
|
|
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
|
entry: './path/to/my/entry/file.js',
|
|
|
|
|
output: {
|
|
|
|
|
path: path.resolve(__dirname, 'dist'),
|
|
|
|
|
filename: 'my-first-webpack.bundle.js'
|
|
|
|
|
}
|
|
|
|
|
};
|
2019-12-02 09:52:24 +08:00
|
|
|
path 输出目录
|
|
|
|
|
filename 输出文件名
|
|
|
|
|
|
|
|
|
|
## loader
|
2019-12-02 09:53:24 +08:00
|
|
|
loder 可以让webpack处理javascript文件之外的
|
|
|
|
|
默认webpack只可以处理javascript文件
|
