webpack是一个模块打包器,将一切资源(代码资源及非代码资源)进行打包,即根据入口文件找到依赖,会形成一颗依赖树。
Entry
用来指定webpack的打包入口
- 单入口:entry是一个字符串
module.exports = {
entry: './path/entry/file.js'
}
- 多入口:entry是一个对象
module.exports = {
entry: {
app: './src/app.js',
home: './src/home.js'
}
}
Output
用来指定打包的输出,即告诉webpack如何将编译后的文件输出到磁盘
- 单入口配置
module.exports = {
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
}
- 多入口配置(通过占位符确保文件名称的唯一)
module.exports = {
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
Loaders
webpack开箱即用只支持JS和JSON两种文件类型,通过Loaders去支持其它文件类型并把它们转化成有效的模块,并且可以添加到依赖图中。
本身是一个函数,接受源文件作为参数,返回转换的结果。
名称 | 描述 |
---|---|
babel-loader | 转换ES6、ES7等JS新特性语法 |
css-loader | 支持.css文件的加载和解析 |
less-loader | 将less文件转换为css |
ts-loader | 将TS转换成JS |
file-loader | 进行图片、字体等的打包(富媒体) |
raw-loader | 将文件以字符串的形式导入 |
thread-loader | 多进程打包JS和CSS |
test指定匹配规则,use指定使用的loader名称
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader'}
]
}
}
Plugins
用来增强webpack的功能,通常用于打包输出文件的优化,资源管理和环境变量注入,作用于整个构建过程。
常见的Plugins有哪些?