01- webpack入口:entry

/** entry 对象属性:
        dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
        filename: 指定要输出的文件名称。
        import: 启动时需加载的模块。
        library: 指定 library 选项,为当前 entry 构建一个 library。
        runtime: 运行时 chunk 的名字。如果设置了,就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
        publicPath: 当该入口的输出文件在浏览器中被引用时,为它们指定一个公共 URL 地址。请查看 output.publicPath
    注意事项:
        1.runtime 和 dependOn 不应在同一个入口上同时使用
        2.dependOn 不能是循环引用的
        3.runtime 不能指向已存在的入口名称
    常见场景:
        1.分离应用程序和第三方库(vender)
            entry: {
                main: './src/app.js',
                vendor: './src/vendor.js',
            }
            // webpack.prod.js
            output: {
                filename: '[name].[contenthash].bundle.js',
            }
            // webpack.dev.js
            output: {
                filename: '[name].bundle.js',
            }
            webpack >= 4后,使用 optimization.splitChunks 选项,将 vendor 和 app(应用程序) 模块分开,并为其创建一个单独的文件。
            不要 为 vendor 或其他不是执行起点创建 entry
        
        2.多页面应用程序
            entry: {
                pageOne: './src/pageOne/index.js',
                pageTwo: './src/pageTwo/index.js',
                pageThree: './src/pageThree/index.js',
            }
**/

// 实例:
module.export = {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js',
        a2: 'dependingfile.js',
        b2: {
          dependOn: 'a2',
          import: './src/app.js',
        }
    }
}

 

posted @ 2022-08-08 15:59  monkey-K  阅读(141)  评论(0编辑  收藏  举报