webpack构建项目（四）webpack六大配置模块

系列文章目录

webpack构建项目（三）性能优化

---

---

前言

前面已经大致学习了webpack并且已经有了一定的实战经验，
下面来深入理解 webpack的五大核心概念。

---

一、entry

1. 单入口
   打包形成一个chunk。 输出一个bundle文件。
   此时chunk的名称默认是 main

  `entry:'./src/index.js'`

2. 多入口
   所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
   只有在HMR功能中让html热更新生效

entry:['./src/index.js', './src/add.js']

3. 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',
    // 输出文件目录（将来所有资源输出的公共目录）