【webpack】- 3 - Entry

Entry

• 入口文件，也就是从哪个文件开始进行依赖分析并打包
• 在 webpack v5 中，默认为 entry: './src/index.js'

单入口应用：

• 打包生成一个 chunk，输出一个 bundle 文件

• 可以直接使用：

    entry: './src/index.js'
  

• 如果要修改输出的 filename：

1. 通过 input 的 key-value 设置，但是需要 output 中设置的 filename 为 [name].js，否则以 output 中设置为准

   entry: {
     app: "./src/index.js" // 打包输出 app.js
   }
   

    entry: './src/index.js'
    // 是以下写法的简写
    entry: {
    	main: './scr/index.js'
    }
   

2. 通过 output 的 filename 设置

   output: {
     filename: 'app.js'
   }
   

多入口应用：

• 有 n 个 key-value pair 就会形成 n 个 chunk，输出 n 个 bundle 文件

• 每个 chunk 的 filename 为 key

  {
    entry: {
      index: ['./src/index.js', './src/count.js'],
      add: './src/add.js',
      remove: './src/remove.js'
    }
  }
  

• 如果为数组，数组里的多个入口文件会被打包成一个 chunk，输出一个 bundle 文件，且默认为 main.js，如果指定 key，则以 key 为 filename

• 数组一般只在 HMR 功能中为了让 html 热更新生效而使用，或者 dll 中使用