系列文章目录
前言
前面已经大致学习了webpack并且已经有了一定的实战经验,
下面来深入理解 webpack的五大核心概念。
一、entry
- 单入口
打包形成一个chunk。 输出一个bundle文件。
此时chunk的名称默认是 main
`entry:'./src/index.js'`
- 多入口
所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
只有在HMR功能中让html热更新生效
entry:['./src/index.js', './src/add.js']
- object
多入口
有几个入口文件就形成几个chunk,输出几个bundle文件
此时chunk的名称是 key
entry: {
index: ['./src/index.js', './src/count.js'],
add: './src/add.js'
}
特殊用法
{ // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 index: ['./src/index.js', './src/count.js'], // 形成一个chunk,输出一个bundle文件。 add: './src/add.js' } ```
二、output
① 属性
filename: 文件名称(指定名称+目录)
path: 输出文件目录(将来所有资源输出的公共目录)
publicPath: 所有资源引入公共路径前缀
chunkFilename: 非入口chunk的名称
library: 整个库向外暴露的变量名【将库暴露出去让外面引入使用】
libraryTarget: 变量名添加到哪个上
② 使用示例
output: {
// 文件名称(指定名称+目录)
filename: 'js/[name].js',
// 输出文件目录(将来所有资源输出的公共目录)