CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 配置

    • 配置
    • 使用不同语言进行配置(configuration languages)
    • 多种配置类型(configuration types)
    • 入口和上下文(entry and context)
    • 输出(output)
    • 模块(module)
    • 解析(resolve)
    • 插件(plugins)
    • 开发中 Server(devServer)
    • devtool
    • 构建目标(targets)
      • target
      • string
      • function
    • watch 和 watchOptions
    • 外部扩展(externals)
    • 性能(performance)
    • Node
    • 统计信息(stats)
    • 其它选项(other options)
  • 指南(实例)

  • 《Webpack》笔记
  • 配置
CD_wOw
2020-12-15
目录

构建目标(targets)

webpack 能够为多种环境或 target 构建编译。想要理解什么是 target 的详细信息,请阅读target概念页面。

# target

type: string | function(compiler)

告知 webpack 为目标(target)指定一个环境。

# string

通过 WebpackOptionsApply (opens new window) ,可以支持以下字符串值:

选项 描述
async-node 编译为类 Node.js 环境可用(使用 fs 和 vm 异步加载分块)
atom electron-main 的别名
electron electron-main 的别名
electron-main 编译为 Electron (opens new window) 主进程。
electron-renderer 编译为 Electron (opens new window) 渲染进程,使用 JsonpTemplatePlugin, FunctionModulePlugin 来为浏览器环境提供目标,使用 NodeTargetPlugin 和 ExternalsPlugin 为 CommonJS 和 Electron 内置模块提供目标。
node 编译为类 Node.js 环境可用(使用 Node.js require 加载 chunk)
node-webkit 编译为 Webkit 可用,并且使用 jsonp 去加载分块。支持 Node.js 内置模块和 nw.gui (opens new window) 导入(实验性质)
web 编译为类浏览器环境里可用**(默认)**
webworker 编译成一个 WebWorker

例如,当 target 设置为 "electron",webpack 引入多个 electron 特定的变量。有关使用哪些模板和 externals 的更多信息,你可以直接参考 webpack 源码 (opens new window)。

# function

如果传入一个函数,此函数调用时会传入一个 compiler 作为参数。如果以上列表中没有一个预定义的目标(target)符合你的要求,请将其设置为一个函数。

例如,如果你不需要使用以上任何插件:

const options = {
  target: () => undefined
};
1
2
3

或者可以使用你想要指定的插件

const webpack = require("webpack");

const options = {
  target: (compiler) => {
    compiler.apply(
      new webpack.JsonpTemplatePlugin(options.output),
      new webpack.LoaderTargetPlugin("web")
    );
  }
};
1
2
3
4
5
6
7
8
9
10
编辑 (opens new window)
#Webpack
上次更新: 2021/08/22, 01:09:59
devtool
watch 和 watchOptions

← devtool watch 和 watchOptions→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式