入口起点(entry points)
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。每个依赖项被处理后会输出到称之为 bundles 的文件中,可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。
单个入口配置
const config = { entry: './src/main.js' }; // 或者 const config = { entry: { main: './src/main.js' } };
多入口配置
const config = { entry: { main: './src/index.js', index2: './src/index2.js', } };
多入口创建的依赖图是彼此完全分离,相互独立的(每个 bundle 中都有一个 webpack 引导(bootstrap)),页面间的共享代码不能被复用,导致打包出的 bundle 文件都非常大,此时需要 CommonsChunkPlugin 等插件做公共代码的抽取,这在后续篇章中会有介绍。
输出(output)
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。即使可以配置多个入口起点,但只能指定一个输出配置。
output.path
path 定义编译后 bundle 的输出目录,该值必须是一个绝对路径,如 'C:\dist' 或 '/dist',项目中常会使用 node.js 的 path 模块配置目录的绝对地址。
output: { path: path.resolve(__dirname, 'dist') },
path 路径中可以添加 [hash] 占位符,在参数中被替换为编译过程(compilation)的 hash
output.filename
filename 选项决定了每个输出 bundle 的名称,这些 bundle 将写入到 output.path 选项指定的目录下。
filename 默认是入口的名称,如果 entry 配置的是一个字符串值会默认使用 main 做为文件名,值得注意的是 filename 还是可以使用像 "js/[name]/bundle.js" 这样的文件夹结构。
webpack 内置了很多替换模板即占位符,通过这些占位符可以灵活的控制 bundle 的名称,下面一起来看看常用占位符的使用。
[hash]
官方定义:使用模块标识符(module identifier)的 hash 为文件名。需要注意的是这段描述并不是那么准确,这里的 hash 应该是每个compilation对应的哈希值,文件内容的变化都会导致 hash 的不同,以上是博主个人理解,如果不对请网友留言纠正。
[chunkhash]
使用 chunk 内容的 hash 作为文件名。chunk 是 webpack 打包进程中的一组模块,在不使用 CommonsChunkPlugin 等代码分离插件的时候 ,chunk 和 bundle 是一一对应的关系,在生产环境推荐使用该模式作为文件名。
[name]
使用 entry 入口名称作为文件名。入口没有配置时默认值是 main。
[id]
使用模块标识符(module identifier)为文件名,在webpack构建过程中,每个module.id 会基于默认的解析顺序(resolve order)进行增量。
评论列表
评论内容: