专栏首页亦枫的大佬之路webpack中的mainself和构建目标

webpack中的mainself和构建目标

manifest

在使用 webpack 构建的典型应用程序或站点中,有三种主要的代码类型:

1.你或你的团队编写的源码。

2.你的源码会依赖的任何第三方的 library 或 “vendor” 代码。

3.webpack 的 runtime 和 manifest,管理所有模块的交互。

Runtime

如上所述,我们这里只简略地介绍一下。runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码。runtime 包含:在模块交互时,连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。

Manifest

那么,一旦你的应用程序中,形如 index.html 文件、一些 bundle 和各种资源加载到浏览器中,会发生什么?你精心安排的 /src 目录的文件结构现在已经不存在,所以 webpack 如何管理所有模块之间的交互呢?这就是 manifest 数据用途的由来……

当编译器(compiler)开始执行、解析和映射应用程序时,它会保留所有模块的详细要点。这个数据集合称为 “Manifest”,当完成打包并发送到浏览器时,会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法,那些 import 或 require 语句现在都已经转换为 webpack_require 方法,此方法指向模块标识符(module identifier)。通过使用 manifest 中的数据,runtime 将能够查询模块标识符,检索出背后对应的模块。

问题

所以,现在你应该对 webpack 在幕后工作有一点了解。“但是,这对我有什么影响呢?”,你可能会问。答案是大多数情况下没有。runtime 做自己该做的,使用 manifest 来执行其操作,然后,一旦你的应用程序加载到浏览器中,所有内容将展现出魔幻般运行。然而,如果你决定通过使用浏览器缓存来改善项目的性能,理解这一过程将突然变得尤为重要。

通过使用 bundle 计算出内容散列(content hash)作为文件名称,这样在内容或文件修改时,浏览器中将通过新的内容散列指向新的文件,从而使缓存无效。一旦你开始这样做,你会立即注意到一些有趣的行为。即使表面上某些内容没有修改,计算出的哈希还是会改变。这是因为,runtime 和 manifest 的注入在每次构建都会发生变化。

构建目标(targets)

因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置。

webpack 的 target 属性不要和 output.libraryTarget 属性混淆。

用法

要设置 target 属性,只需要在你的 webpack 配置中设置 target 的值。

webpack.config.js

module.exports = {
  target: 'node'
};

在上面例子中,使用 node webpack 会编译为用于「类 Node.js」环境(使用 Node.js 的 require ,而不是使用任意内置模块(如 fs 或 path)来加载 chunk)。

每个target都有各种部署(deployment)/环境(environment)特定的附加项,以支持满足其需求。

多个 Target

尽管 webpack 不支持向 target 传入多个字符串,你可以通过打包两份分离的配置来创建同构的库:

webpack.config.js

var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

var clientConfig = {
  target: 'web', // <=== 默认是 'web',可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];

上面的例子将在你的 dist 文件夹下创建 lib.js 和 lib.node.js 文件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack的入口起点(entry points)

    入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入...

    刘亦枫
  • webpack及其四个核心

    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归...

    刘亦枫
  • webpack中的插件(plugins)

    插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!

    刘亦枫
  • 用 TypeScript 开发 Node.js 程序[每日前端夜话0x5E]

    翻译:疯狂的技术宅 原文:https://medium.com/@freek_mencke/how-to-write-node-js-applications-...

    疯狂的技术宅
  • 优化Webpack构建性能的几点建议

    Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,W...

    葡萄城控件
  • 优化Webpack构建性能的几点建议

    葡萄城控件
  • 性能优化篇---Webpack构建速度优化

    const Jarvis = require("webpack-jarvis"); plugins: [ new Jarvis({ watchO...

    keyWords
  • iOS 开发:『Runtime』详解(四)获取类详细属性、方法

    文中示例代码在: bujige / YSC-Class-DetailList-Demo

    行走少年郎
  • linux 安装配置 postfix+p

    1.在自己的域名服务商添加 域名 与A记录,我的是内部测试也就在自己的内部DNS 上添加了 以下记录

    py3study
  • 如何在 Debian 下配置邮件服务器

    本教程将讨论如何在Debian(或Ubuntu)配置一个可工作的邮件服务器。我们知道在邮件服务器使用的主要协议有SMTP、POP和IMAP。在本教程中,SMTP...

    Debian社区

扫码关注云+社区

领取腾讯云代金券