配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。

1. 用法

在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:

  • filename 用于输出文件的文件名  (A filename to use for the output file(s))。
  • 目标输出目录 path 的绝对路径 (An absolute path to your preferred output directory)。

配置如下:

2. Multiple Entry Points

如果配置创建了多个单独的 "chunk"(例如,使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件),则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

3. Advanced(进阶)

Here's a more complicated example of using a CDN and hashes for assets:

在编译时不知道最终输出文件的 publicPath 的情况下,publicPath 可以留空,并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath,你可以先忽略它,并且在入口起点设置 __webpack_public_path__

webpack学习之——Output的更多相关文章

  1. webpack学习三——output

    output的两个参数filename,path 一.path输出路径,输出路径要绝对路径,否则报错.做法如下: path:__dirname + 'path' 二.filename 输出文件命,相对 ...

  2. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  3. webpack学习(入门基础)

    webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...

  4. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  5. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  6. webpack学习(五)—webpack+react+es6(第1篇)

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  7. 前端小白webpack学习(二)

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  8. 前端小白webpack学习(一)

    俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档, ...

  9. Webpack学习-Plugin

    原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...

随机推荐

  1. 04-python 学习第四点-装饰器

    装饰器就是一个函数,他是通过不修改某个函数的源代码和调用方式的前提下可以添加新功能的一种函数.在python 中装饰器一般采用高阶函数和嵌套函数达到装饰的作用,下面进行实例讲解: 1.目前有一个网址有 ...

  2. 全栈之路-微信小程序-SKU开发(代码)

    SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几 ...

  3. 微信小程序之组件的集合(四)

    这个主要是来开发book的这个大模块的,看看如何优雅的开发出booked模块! 一.book模块的创建 这个就很简单了,创建一个大的框架是很简单的 二.组件的编写 (1)wxml组件页面的编码 首先是 ...

  4. CF 981C Useful Decomposition

    题面 题目大意 给定一棵树,要求划分出几条链,使这几条链交于一点. 解题思路 因为所有链都要交于一点,所以必须交于一个度数最多的点.这样就形成了一个菊花形.然后从这个点出发到它的子树,判断子树的度数是 ...

  5. php报错:Notice: iconv(): Wrong charset, conversion from `GBK' to `UTF8' is not allowed

    代码写错了 $raw_data = iconv("GBK", "UTF8", $raw_data); 改成 $raw_data = iconv("GB ...

  6. vue-cli 手机上浏览自己的项目

    首先我们需要更改config文件 拿我这个项目举例子,config文件下的index.js内的dev下的host需要更改为自己的电脑IP 其次,重点来了,我们需要更改路径,细节的为什么我还解释不来,简 ...

  7. 19-10-16-R

    其实……这篇是真咕了. 反思: ××我$T1$两个小时构造$xiebi$了(虽然我觉得如果干仨小时可能行?) ……如果$T1$用时过长的话那考试多半不行…… 结果: 35 Miemeng 50 03: ...

  8. OpenCV cvReleaseImage把图像怎么样了?

         cvReleaseImage(img)和free.delete相同,只是把该指针img所指的内存给释放掉,但并没有把img指针本身干掉,其地址仍然不变(非NULL),只是该地址对应的内存是垃 ...

  9. 关于mybatis-config.xml文件的基础解释

    今天是我第一天落户博客园,想一想从mybatis框架开始写起吧.mybatis框架与Hibernate框架相比来说,专注于SQL语句,对SQL语句的要求比较高吧. 我觉得,对于mybatis框架来说, ...

  10. ssm整合:搭建环境

    解决配置中文过滤器后,存入数据库时依旧乱码问题:在web.xml中修改数据库url如下: <property name="jdbcUrl" value="jdbc: ...