webpack学习笔记(4)--webpack.config.js
devtool参数
这个参数控制是否生成,以及如何生成source map,已经在官网的doc说明总结了。
下表总结了各个参数和使用的情况
devtool | 构建速度 | 重新构建速度 | 生产环境 | 品质(quality) |
(none)
|
+++ | +++ | yes | 打包后的代码 |
eval
|
+++ | +++ | no | 生成后的代码 |
cheap-eval-source-map
|
+ | ++ | no | 转换过的代码(仅限行) |
cheap-module-eval-source-map
|
o | ++ | no | 原始源代码(仅限行) |
eval-source-map
|
-- | + | no | 原是源代码 |
cheap-source-map
|
+ | o | yes | 转换过的代码(仅限行) |
cheap-module-source-map
|
o | - | yes | 原是源代码(仅限行) |
inline-cheap-source-map
|
+ | o | no | 转换过的代码(仅限行) |
inline-cheap-module-source-map
|
o | - | no | 原始源代码(仅限行) |
source-map
|
-- | -- | yes | 原始源代码 |
inline-source-map
|
-- | -- | no | 原是源代码 |
hidden-source-map
|
-- | -- | yes | 原是源代码 |
nosources-source-map
|
-- | -- | yes | 无源代码内容 |
+++
非常快速, ++
快速, +
比较快, o
中等, -
比较慢, --
慢
有关品质的说明
打包后的代码
- 将所有生成的代码视为一大块代码。你看不到相互分离的模块。生成后的代码
- 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 生成的代码。示例:你会看到类似var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();
,而不是import {test} from "module"; test();
。转换过的代码
- 每个模块相互分离,并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。示例:你会看到类似import {test} from "module"; var A = function(_test) { ... }(test);
,而不是import {test} from "module"; class A extends test {}
。原始源代码
- 每个模块相互分离,并用模块名称进行注释。你会看到转译之前的代码,正如编写它时。这取决于 loader 支持。无源代码内容
- source map 中不包含源代码内容。浏览器通常会尝试从 web 服务器或文件系统加载源代码。你必须确保正确设置output.devtoolModuleFilenameTemplate
,以匹配源代码的 url。(仅限行)
- source map 被简化为每行一个映射。这通常意味着每个语句只有一个映射(假设你使用这种方式)。这会妨碍你在语句级别上调试执行,也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后,映射关系是不可能实现的,因为压缩工具通常只会输出一行。
对于开发环境
以下选项非常适合开发环境:
eval
- 每个模块都使用eval()
执行,并且都有//@ sourceURL
。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。eval-source-map
- 每个模块使用eval()
执行,并且 source map 转换为 DataUrl 后添加到eval()
中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。cheap-eval-source-map
- 类似eval-source-map
,每个模块使用eval()
执行。这是 "cheap(低开销)" 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像eval
devtool。cheap-module-eval-source-map
- 类似cheap-eval-source-map
,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。
对于生产环境
这些选项通常用于生产环境中:
(none)
(省略 devtool
选项) - 不生成 source map。这是一个不错的选择。
source-map
- 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。
你应该将你的服务器配置为,不允许普通用户访问 source map 文件!
hidden-source-map
- 与 source-map
相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。
你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。
nosources-source-map
- 创建的 source map 不包含 sourcesContent(源代码内容)
。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。
这仍然会暴露反编译后的文件名和结构,但它不会暴露原始代码。
webpack学习笔记(4)--webpack.config.js的更多相关文章
- webpack学习笔记(3)--webpack.config.js
module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- webpack学习笔记(1)--webpack.config.js
主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...
- webpack学习笔记(2)--webpack.config.js
3 模式 mode mode 参数设置为 development(开发模式), production(生产模式) 或 none(无),可以启用对应环境下 webpack 内置的优化.默认值为 prod ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
随机推荐
- [bzoj2600][Ioi2011]ricehub_二分
ricehub bzoj-2600 Ioi-2011 题目大意:在数轴上有r块稻田,稻田坐标为整数.计划建造一个米仓,使得它可以收取尽量多的稻米.米仓的坐标仍需为整数.每一块权值为val的稻田距离米仓 ...
- 框架统一出参数DTO格式
这个可以没必要定义. 每个接口返回自己的数据格式就好
- Dozer--第三方复制工具,哎哟,还不错!
Dozer简单点说,就是拷贝工具,也是复制工具的意思,官方的解释是:Dozer is a Java Bean to Java Bean mapper that recursively copies d ...
- andoid电阻触摸移植
这里我使用的是210的开发板 系统Android4.0.4 内核linux3.0.8 要用电阻屏一般都是使用tslib进行校准的 这里给个我在android上用的tslib 下载地址 http://d ...
- NSAttributedString宽高计算小技巧
通常对于CoreText之类自己实现绘制的控件来说,计算富文本的宽高事实上须要依赖CTFramesetterSuggestFrameSizeWithConstraints这种方法. 但有些时候.我们可 ...
- 2016.04.06,英语,《Vocabulary Builder》Unit 10
put, from the Latin verb putare, meaning 'to think, consider, or believe'. reputation: [ˌrepju'teɪʃn ...
- Spark MLlib介绍
Spark MLlib介绍 Spark之所以在机器学习方面具有得天独厚的优势,有以下几点原因: (1)机器学习算法一般都有很多个步骤迭代计算的过程,机器学习的计算需要在多次迭代后获得足够小的误差或者足 ...
- nyoj--92--图像有用区域(模拟)
图像有用区域 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 "ACKing"同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取出图片中某个黑 ...
- hdoj--1864--最大保险额(背包)
最大报销额 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- 转四种常见的post请求
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...