webpack entry中dependOn和import的用法

dependOn：依赖的其他入口，在该入口加载前加载。作用：可以用来拆分公共的依赖项，如：当 shared.js 中封装了大量的公共方法时，当其被其他文件引用，为避免重复打包，可以将其拆分成一个单独的 chunk

import：启动时需加载的模块

// webpack.config.js
module.exports = {
  entry: {
    shared: './src/shared.js',
    main: {
      /**
       * 因为 index.js 中使用了 shared.js 中的方法
       * 所以此配置保证了shared的chunk先生成
      */
      dependOn: 'shared',
      import: './src/index.js',
    }
  },
}

/**
 * 释义：
 * entry中配置了两个入口，会生成两个chunk，名称分别为 shared.js和main.js
 * 生成main.js：
 * 设置了 dependOn，表明：需要先生成 shared.js 的 chunk
 * 设置了 import，表明：先加载 ./src/index.js 的资源
 * 即根据此资源的内容生成最终的 main.js
*/

// index.js
import { sum } from './shared.js'

const value = sum(1, 2)
console.log('value', value)

// shared.js
export const sum = (a, b) => a + b

// index.html
<script src="./dist/shared.js"></script>
<script src="./dist/main.js"></script>