1.1 KiB
1.1 KiB
webpack
这是个人学习webpack笔记
概念
webpack是一个静态文件打包器 他会递归生成一个依赖树 然后生产呢个一个或多个包(bundel)
需要了解四个概念
- 入口
- 输出
- loader 加载
- 插件
入口
入口是指webpack应在那个文件开始处理依赖图 然后输出到一个叫bundles(包)文件中 可以使用entry属性 定义入口 module.exports = { entry: './path/to/my/entry/file.js' };
出口
出口是告诉webpack将所打包成功的 bundel输出到哪个位置 以及如何命名 默认为./dist 可以使用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' } }; path 输出目录 filename 输出文件名
loader
loder 可以让webpack处理javascript文件之外的 默认webpack只可以处理javascript文件 loader将其他文件转化为webpack可以处理的有效模块文件 webpack loader配置有两个目标
- test属性 用来标识要处理的某个文件或某些文件
- use属性 表示转换时 用到那一个