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', } } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步