一、entry
1、string：'./src/index.js'
单入口
打包形成一个chunk。输出一个bundle文件
默认名为main
2、array：['./src/index.js','./src/**.js']
多入口
打包形成一个chunk，输出一个bundle文件
3、object
多入口
entry:{
index:'./src/index.js'
add:'./src/add.js'
}
有几个入口文件就形成几个chunk，输出多个bundle文件
此时chunk得名称是key
4、特殊用法
entry:{
//所有得入口最终会形成一个chunk，输出一个bundle文件
index:['./src/index.js','./src/count.js']
//形成一个chunk，输出一个bundle文件
add:'./src/add.js'
}
二、output
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
entry:'./src/index.js',
output:{
//指定文件名称及目录
filename:'./js/[name].[cententhash:10].js'，
//输出文件得目录（所有资源）
path:resolve(__dirname,'build'),
//所有资源引入公共路径前缀
publicPath:'/'，
//非入口chunk得名称
chunkFilename:'js/[name]_chunk.js',
//整个库向外暴露得变量名
library:'[name]'
//变量名添加到那个上
libraryTarget:'window'
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'development'
}
三、module
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
entry:'./src/index.js',
output:{
filename:'./js/[name].[cententhash:10].js'，
path:resolve(__dirname,'build'),
},
module:{
rules:[
//loader配置
{
test:/\.css$/,
//多个loader用use
use:['style-loader','css-loader']
},
{
test:/\.js$/
//单个loader用loader
loader:'eslint-loader'，
//排除node-module下得js文件
exclude:/node-modules/，
//只检查src下面得js文件
include:resolve(__dirname,'src')，
//优先执行 'post',延后执行
enforce:'pre',
//指定loader得配置
options:{
}
},
{
//以下配置只会生效一个
oneOf:[]
}
]
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'development'
}
四、resolve
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
entry:'./src/index.js',
output:{
filename:'./js/[name].[cententhash:10].js',
path:resolve(__dirname,'build')
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'development',
//解析模块得规则
resolve:{
//配置解析模块路径别名,优点：简写路径，缺点：路径没有提示
alias:{
$css:resolve(__dirname,'src/css')
}，
//配置省略文件路径得后缀名
extensions:['.js','json'],
//告诉webpack解析模块是去那个目录找
modules:[resolve(__dirname,'../../node_modules'),'node_modules']
}
}
五、devServer
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
entry:'./src/index.js',
output:{
filename:'./js/[name].[cententhash:10].js',
path:resolve(__dirname,'build')
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'development',
devServer:{
//运行代码得目录
contentBase：resolve(__dirname,'build'),
//监视 contentBase 目录下得所有文件，一旦文件发生变化就会重新打包
watchContentBase:true,
//
watchOptions:{
//忽略文件
ignored:/node-modules/
},
//启动gzip压缩
compress:true,
//端口号
port：3000,
//域名
host:'localhost',
//自动打开浏览器
open：true,
//开启HMR功能
hot：true,
//不要显示启动服务日志
clientLogLevel:'none',
//除了一些基本启动信息意外，其他内容都不要显示
quiet:true，
//如果出错，不要全屏提示
overlay:false,
//服务器代理，解决开发环境跨域问题
proxy:{
//一旦devServer(3000)服务器接收到 /api/xxx 得请求，就会把请求转发得另一个服务器上(3000)
'./api':{
target:'http://localhost:5000'，
//发送请求时，请求路径重新：将 /api/xxx ---> /xxx (去掉/api)
pathRewrite:{
'^/api':''
}
}
}
}
}
六、optimization
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
entry:'./src/index.js',
output:{
filename:'./js/[name].[cententhash:10].js',
path:resolve(__dirname,'build')
},
plugins:[
new HtmlWebpackPlugin()
],
mode:'production',
optimization:{
splitChunks:{
chunks:'all'
},
//将当前模块记录其他模块得hash单独打包为一个文件 runtime
//解决：修改a文件导致b文件得contenthash变化
runtimeChunk:{
name:entrypoint => `runtime-${entrypoint.name}`
},
minimizer:[
//配置生产环境得压缩方案：js和css
new TerserWebpackPlugin({
//开启缓存
cache:true,
//开启多进程打包
parallel:true,
//启动source-map
sourceMap:true
})
]
}
}
