entry配置

最后更新于:2022-04-02 05:32:25

## 前言 基于前面的入门文章,你对webpack的入口文件的概念应该比较清楚了,那么本文主要介绍一些entry配置细节。 ## 概念解释 ![webpack打包](https://user-gold-cdn.xitu.io/2018/3/19/1623bfac4a1e0945?imageView2/0/w/1280/h/960/format/webp/ignore-error/1) 如上图所示,在多个代码模块中会有一个起始的 .js 文件,这个便是 webpack 构建的入口。webpack 会读取这个文件,并从它开始解析依赖,然后进行打包。如图,一开始我们使用 webpack 构建时,默认的入口文件就是 ./src/index.js。 我们常见的项目中,如果是单页面应用,那么可能入口只有一个;如果是多个页面的项目,那么经常是一个页面会对应一个构建入口。 入口可以使用 entry 字段来进行配置,webpack 支持配置多个入口来进行构建。 ## 不同写法场景 ~~~ //单文件入口 module.exports = { entry: './src/index.js' } // 上述配置等同于 module.exports = { entry: { main: './src/index.js' } } //支持对象语法 module.exports = { entry: { app: './src/app.js', vendors: './src/vendors.js' } }; // 或者配置多个入口 module.exports = { entry: { foo: './src/page-foo.js', bar: './src/page-bar.js', // ... } } // 使用数组来对多个文件进行打包,多个文件作为一个入口,webpack 会解析两个文件的依赖后进行打包 module.exports = { entry: { main: [ './src/foo.js', './src/bar.js' ] } } ~~~ ## 实际方案 ### 单文件以及供应商 主要适用于有些第三方的文件不用杂糅到入口文件,分别进行依赖打包。 ~~~ const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' } }; ~~~ ### 多页应用入口方案设计 这个方案主要是针对多页应用的设计,我们可以针对多页分别设计自己的入口,除了更加清晰之外,讲为不同的入口文件提供不同的页面模板,有利于更好的提取公共文件,对于其他页面没有必要的文件不用加载。在入口点之间重复使用大量代码/模块的多页面应用程序可以大大受益于这些技术。 ~~~ const config = { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js' } }; ~~~ 备注:作为经验法则:一个页面最好只用一个入口文件的js ## 参考文档 - 掘金小册《使用 webpack 定制前端开发环境》 - [webpack官网介绍](https://webpack.js.org/concepts/entry-points/)
';