webpack-Targets(构建目标)
构建目标(Targets)
因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置。
用法
要设置 target
属性,只需要在你的 webpack 配置中设置 target 的值。
webpack.config.js
module.exports = {
target: 'node'
};
在上面例子中,使用 node
webpack 会编译为用于「类 Node.js」环境(使用 Node.js 的 require
,而不是使用任意内置模块(如 fs
或 path
)来加载 chunk)。
每个target都有各种部署(deployment)/环境(environment)特定的附加项,以支持满足其需求。查看target 的可用值。
Further expansion for other popular target values
多个 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
文件。
资源
从上面的选项可以看出有多个不同的部署目标可供选择。下面是一个示例列表,以及你可以参考的资源。
- compare-webpack-target-bundles:有关「测试和查看」不同的 webpack target 的大量资源。也有大量 bug 报告。
- Boilerplate of Electron-React Application:一个 electron 主进程和渲染进程构建过程的很好的例子。
webpack-Targets(构建目标)的更多相关文章
- webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)
Dependency Graph 任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系.这使得 webpack 可以接收非代码资源(non-code asset)(例如图像 ...
- webpack进阶构建项目(一)
webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...
- D1.1.利用npm(webpack)构建基本reactJS项目
前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...
- Vue项目模板--和--webpack自动化构建工具的---项目打包压缩使用
[首先安装node.js]: 1. 从node.js官网下载并安装node,安装过程很简单. 2. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 npm -v2.3.0 #升 ...
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack前端构建工具学习总结(二)之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- webpack前端构建angular1.0!!!
webpack前端构建angular1.0 Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也 ...
- webpack的构建流程
一.运行流程 webpack 的运行流程是一个串行的过程,它的工作流程就是将各个插件串联起来 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条webpack机制中,去改变webpa ...
随机推荐
- 利用条件运算符的嵌套来完成此题: 学习成绩>= 90分的同学用A表示, 60-89分之间的用B表示, 60分以下的用C表示。
题目:利用条件运算符的嵌套来完成此题: 学习成绩>= 90分的同学用A表示, 60-89分之间的用B表示, 60分以下的用C表示. 程序分析:(a> b)?a:b这是条件运算符的基本例子. ...
- Omnidirectional DSO: Direct Sparse Odometry with Fisheye Cameras 论文摘要
1. Abstract 通过一种Unified Omnidirectional Model作为投影方程. 这种方式可以使用图像的所有内容包括有强畸变的区域,而现存的视觉里程计方案只能修正或者切掉来使用 ...
- 点击按钮打开一个新的窗口 关键词(Intent, setData , putExtra , startActivity |Bundle)
M3U8_Video_demo 项目 //------------------ 创建发送private void playVideo(String source, String title) { if ...
- excel数据比对,查找差异
1.选中需比对的数据 2.开始->条件格式->突出显示单元格规则->重复值 3.选择唯一值,点击确定 4.结果展示 5.颜色标识的即:不同值
- encodeURI()与decodeURI()等转码方法
只针对文本编码 encodeURI() 只针对文本解码 decodeURI()针对文本和特殊字符的编码 encodeURIComponent()针对文本和特殊字符的解码 decodeURIComp ...
- 关于JVM内存模型,GC策略以及类加载器的思考
JVM内存模型 Sun在2006年将Oracle JDK开源最终形成了Open JDK项目,两者在绝大部分的代码上都保持一致.JVM的内存模型是围绕着原子性(操作有且仅有一个结果).可见性(racin ...
- Django中的Cookie、Session、Token
Cookie : 指望着为了辨别用户身份.进行会话跟踪而存储在用户本地的数据(通常经过加密),是由服务端生成,发送给客户端浏览器,浏览器会将Cookie以key/value保存,下一请求同一网站是就发 ...
- virsh 命令
virsh是用与管理虚拟化环境中的客户机和Hypervisor的命令行工具,与virt-manager等工具类似,也是调用libvirt API来实现虚拟化的管理. 在使用virsh命令行进行虚拟化管 ...
- Python爬虫-Scrapy-CrawlSpider与ItemLoader
一.CrawlSpider 根据官方文档可以了解到, 虽然对于特定的网页来说不一定是最好的选择, 但是 CrwalSpider 是爬取规整的网页时最常用的 spider, 而且有很好的可塑性. 除了继 ...
- python_OS 模块
os模块 用于提供系统级别的操作 os.getcwd() # 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") # 改变当前脚本工作目 ...