webpack核心概念之entry
Entry用来指定webpack打包的入口，下图中webpack找到入口文件后，会将该文件所有的代码和非代码依赖都梳理出来，最终遍历完依赖树后生成打包后的静态资源。
单入口：entry是一个字符串
module.exports={
entry:'./path/to/my/entry/file.js'
}
多入口：entry是一个对象
module.exports={
entry:{
app:'./src/app.js',
adminApp:'./src/adminApp.js'
}
}
webpack核心概念之output
output用来告诉webpack如何将编译后的文件输出到磁盘
单入口配置
module.exports={
entry:'./path/to/my/entry/file.js'，
output:{
filename:'bundle.js',
path:__dirname+'/dist'
}
}
多入口配置：通过占位符确保文件名称的唯一
module.exports={
entry:{
app:'./src/app.js',
adminApp:'./src/adminApp.js'
}，
output:{
filename:'[name].js',
path:__dirname+'/dist'
}
}
webpack核心概念之loaders
webpack开箱即用只支持js和json两种文件类型，通过loaders娶支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。
loaders本身是一个函数，接受源文件作为参数，返回转换的结果。
常见的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 |
const path = require('path');
module.exports={
output:{
filename:'bundle.js'
},
module:{
rules:[
{test:/\.txt$/, use:'raw-loader'}
]
}
};test：指定匹配规则
use：指定使用的loader
webpack核心概念之plugins
插件用于bundle文件的优化，资源管理和环境变量注入，它作用于整个构建过程。文章来源：https://www.toymoban.com/news/detail-413560.html
常见的plugins
| 名称 | 描述 |
| CommonsChunkPlugin | 将chunks相同的模块代码提取成公共js |
| CleanWebpackPlugin | 清理构建目录 |
| ExtractTextWebpackPlugin | 将CSS从bunlde文件里提取成一个独立的CSS文件 |
| CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
| HtmlWebpackPlugin | 创建html文件娶承载输出的bundle |
| UglifyjsWebpackPlugin | 压缩JS |
| ZipWebpackPlugin | 将打包出的资源生成一个zip包 |
const path = require('path');
module.exports={
output:{
filename:'bundle.js'
},
plugins:[
new HtmlWebpackPlugin({template:'./src/index.html'})
]
}webpack核心概念之mode
mode用来指定当前的构建环境是：production、development还是none，设置mode可以使用webpack内置的函数，默认值为production。文章来源地址https://www.toymoban.com/news/detail-413560.html
Mode的内置函数功能
| 选项 | 描述 |
| development | 设置process.env.NODE_ENV的值为development，开启NamedChunksPlugin和NamedModulesPlugin。 |
| production | 设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin，FlagIncludedC |
到了这里，关于第二章 webpack基础用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
