核心概念:
- Entry 用来指定webpack的打包入口
- Output 用来告诉webpack如何将编译后的文件输出到磁盘
- Loaders 只支持JS和JSON两种类型,通过Loaders去支持其它文件类型并把他们转换成有效的模块,并且可以添加到依赖图中。
- Plugins 插件用户bundle文件的优化,资源管理和环境变量注入。作用于整个构建过程。
- Mode 用来指定当前的构建环境是: production 、development、node。设置mode可以使用webpack内置的函数,默认为production。
Entry的用法:
单入口: entry是一个字符串
module.exports = {
entry: './path/to/my/entry/file.js'
}
多入口: entry是一个对象
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
}
Output的用法:
单入口配置:
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
};
多入口配置:
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js', // 通过占位符确保文件名称的唯一
path: __dirname + '/dist'
}
};
Loaders的用法:
const path = require('path');
module.exports = {
output: {
filename: 'bundle.js'
},
module: {
rules: [
// test指定匹配规则 use指定使用的loader名称
{ test: /\.txt$/, use: 'raw-loader'}
]
}
}
常见的Loaders:
名称 | 描述 |
babel-loader | 转换ES6、ES7等新特性语法 |
css-loader | 支持.css文件的加载和解析 |
less-loader | 将less文件转换成css |
ts-loader | 将TS转换成JS |
file-loader | 进行图片、字体等的打包 |
raw-loader | 将文件以字符串的形式导入 |
thread-loader | 多进程打包js和css |
Plugins的用法:
const path = require('path');
module.exports = {
output: {
filename: 'bundle.js'
},
plugins: [
// 放到plugins数组里
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
常见的Plugins:
名称 | 描述 |
CommonsChunkPlugin | 将chunks相同的模块代码提取成公共js |
CleanWebpackPlugin | 清理构建目录 |
ExtractTextWebpackPlugin | 将css从bundle文件里提取成一个独立的css文件 |
CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
HtmlWebpackPlugin | 创建html文件去承载输出的bundle |
UglifyjsWebpackPlugin | 压缩js |
ZipWebpackPlugin | 将打包出的资源生成一个zip包 |