1. string —> ‘./src/index.js’
    单入口
    打包形成一个chunk。 输出一个bundle文件。
    此时chunk的名称默认是 main
    2. array —> [‘./src/index.js’, ‘./src/add.js’]
    多入口
    所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
    —> 只有在HMR功能中让html热更新生效~
    3. object
    多入口
    有几个入口文件就形成几个chunk,输出几个bundle文件
    此时chunk的名称是 key
    —> 特殊用法
    {
    // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
    index: [‘./src/index.js’, ‘./src/count.js’],
    // 形成一个chunk,输出一个bundle文件。
    add: ‘./src/add.js’
    }

    1、准备

    ```javascript function add(x, y) { return x + y; }

export default add;

  1. ```javascript
  2. function count(x, y) {
  3. return x - y;
  4. }
  5. export default count;
  1. console.log('index.js文件加载了~');

2、单入口

1、string

  1. module.exports = {
  2. entry: {
  3. add: './src/add.js'
  4. },
  5. output: {
  6. filename: '[name].js',
  7. path: resolve(__dirname, 'build')
  8. },
  9. plugins: [new HtmlWebpackPlugin()],
  10. mode: 'development'
  11. };

1、结果

image.png

2、array

  1. entry: {
  2. index:['./src/index.js', './src/add.js']
  3. },

1、结果

image.png

3、多入口

  1. entry: {
  2. index:'./src/index.js',
  3. add: './src/add.js'
  4. },

1、结果

image.png

4、特殊

  1. entry: {
  2. index: ['./src/index.js', './src/count.js'],
  3. add: './src/add.js'
  4. },

1、结果

image.png