【Webpack系列】入口(entry)

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

入口起点(entry point) 指示webpack应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始，进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的

它的默认值是 ./src/index.js，但你可以通过在 webpack-configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点,单入口写法有两种方式

    /* webpack.config.js */
    module.exports = {
        entry: './path/to/my/entry/file.js'
    }

    /* webpack.config.js */
    module.exports = {
        entry: {
            main: './path/to/my/entry/file.js'
        }
    }

第二种写法就可以为打包出的 chunk 命名，这里的配置的名字就是 main

通常情况下，如果不考虑代码分割，那么一个entry对应就会打包出一个chunk，在多页面应用中，通常会需要多个bundle，因此入口也会配置多个，还有一种情况就是想要一次注入多个依赖文件，并且将它们的依赖关系绘制在 一个chunk 中时，也可以使用多入口的配置，配置示例如下

    /* webpack.config.js */
    module.exports = {
        entry: {
            main1: './path/to/my/entry/file.js',
            main2: './path/to/my/entry/file.js'
        }
    }

    /* webpack.config.js */
    module.exports = {
        entry: ['./src/file_1.js', './src/file_2.js'],
        output: {
            filename: 'bundle.js'
        }
    }

对于对象形式的语法，我们还可以添加 对象描述符，以便我们更详尽的描述所需的配置，配置项如下：

• dependOn：当前入口所依赖的入口。它们必须在该入口被加载前被加载
• filename：指定要输出的文件名称
• import：启动时需加载的模块
• library：指定library选项，为当前entry构建一个library
• runtime：运行时chunk 的名字，如果设置了，就会创建一个新的运行时chunk，在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时chunk
• publicPath：当该入口的输出文件在浏览器中被引用时，为它们指定一个公共URL地址

示例配置如下：

    module.exports = {
        entry: {
            a2: 'dependingfile.js',
            b2: {
                dependOn: 'a2',
                import: './src/app.js'
            }
        }
    };

需要注意 runtime 和 dependOn 不应在同一个入口上同时使用，并且确保 runtime 不能与 已存在的入口名称 重名

结语

入口entry是webpack打包项目的起点，因此是一个十分重要的概念，往往单入口或者多入口的选择会很大程度影响项目的性能，因此还是很有必要把这个概念吃透的，好啦，完结，撒花~