1.webpack配置组成
2.Entry
作用:指定打包的入口,即指定源代码
(1)单入口:入口文件只有一个,entry是一个字符串
module.exports={
entry:'./src/main.js'
}
(2)多入口:入口文件有多个,entry是一个字符串
module.exports={
entry:{
app:'./src/app.js',
adminApp:'./src/adminApp.js'
}
}
3.Output
作用:告诉webpack如何将编译后的文件输出到磁盘,即指定转换后的代码
(1)单入口配置
module.exports={
entry:'./src/main.js'
out:{
filename:'bundle.js',
pathL_dirname+'/dist'
}
}
(2)多入口配置
通过占位符[name]
确保文件名称的唯一性
module.exports={
entry:{
app:'./src/app.js',
adminApp:'./src/adminApp.js'
},
out:{
filename:'[name].js',
path:path.join(_dirname,'/dist')
}
}
运行完后webpack会在dist下生成app.js
和adminApp.js
4.Loaders
(1)作用:webpack开箱即用只支持JS和JSON两种文件类型,如CSS、less、.vue文件等等webpack并不支持,webpack可以通过Loaders去支持其他文件类型并把它们转换成有效模块,并且可以添加到依赖图中。Loaders是一个函数,接收源文件作为参数,返回转换的结果。
(2)常见的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,加快打包速度 |
(3)Loaders的用法
test–指定匹配规则
use–指定使用的loader名称
const path = require('path');
module.exports = {
output:{
filename:'bundle.js'
},
module:{
rules:[
{test:/\.txt$/,use:'raw-loader'}
]
}
}
5.Plugins
(1)作用:用于bundle文件的优化、资源管理和环境变量的注入,作用于整个构建过程,也可以理解为loaders无法完成的事情由Plugins完成。
(2)常见的Plugins
名称 | 描述 |
---|---|
CommonsChunkPlugin | 将chunks相同的模块代码提取成公共js |
cleanWebpackPlugin | 清理构建目录 |
ExtractTextWebpackPlugin | 将css从bundles文件里提取成一个独立的css文件 |
copyWebpackPlugin | 将文件或文件夹拷贝到构建的输出目录 |
HtmlWebpackPlugin | 创建html文件去承载输出的bundle |
UgligyjsWebpackPlugin | 压缩js |
ZipWebpackPlugin | 将打包的资源生成一个zip包 |
(3)用法
const path = require('path');
module.exports = {
output:{
filename:'bundle.js'
},
plugins:[
new HtmlWebpackPlugin({template:'./src/index.html'})
]
}
6.Mode
(1)作用:用来指定当前构建的环境是:production(生成环境)、development(开发环境)、还是none。设置mode可以使用webpack内置的函数,默认为production
(2)内置函数功能
名称 | 描述 |
---|---|
development | 设置process.env.NODE_ENV的值为development。开启NameChunksPlugin和NamedModulesPlugin |
production | process.env.NODE_ENV的值为production。开启FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin |
none | 不开启任何优化选项 |