夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
手撕webpack:输入和输出

入口起点(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)进行增量。

作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

0

支持

0

反对

posted @2020-5-10  拜读(517)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付