首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack 2使用了两次'use strict‘并且有一个奇怪的输出缩写?

Webpack是一个现代化的JavaScript模块打包工具。它的主要功能是将多个模块打包成一个或多个文件,以便在浏览器中加载。Webpack 2是Webpack的一个版本,它在使用上引入了两次'use strict',这是为了确保代码在严格模式下执行。

'use strict'是JavaScript的严格模式指令,它使得代码在更严格的条件下执行,提供更好的错误检查和更强的安全性。在Webpack 2中使用两次'use strict'是为了确保所有模块都在严格模式下执行,以避免潜在的错误。

关于奇怪的输出缩写,可能是指Webpack 2在打包过程中生成的文件名缩写。Webpack可以根据配置生成不同的输出文件名,通常使用哈希值作为文件名的一部分,以确保文件的唯一性。这种缩写可能是为了简化文件名,提高可读性和可维护性。

总结起来,Webpack 2在使用上引入了两次'use strict'是为了确保代码在严格模式下执行,而奇怪的输出缩写可能是为了简化文件名。如果想了解更多关于Webpack的信息,可以参考腾讯云的Webpack产品介绍页面:Webpack产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Tree Shaking

Webpack 项目中,有一个入口文件,相当于一棵树主干,入口文件有很多依赖模块,相当于树枝,虽然依赖了某些模块,但其实只使用其中某些方法,通过 Tree Shaking,将没有使用方法摇掉.../utils"; console.log(sum(1, 2)); 我们在 utils 中定义了 sum 与 sub 两个方法, 仅使用了 sum 方法,而 sub 方法并没有被使用。...我们一起看一下打包后结果 (()=>{"use strict";console.log(3)})(); 未使用 JSON 数据消除 // main.json { "a": "a", "b"...我们一起看一下打包后结果 (()=>{"use strict";console.log("a")})(); Tree Shaking 原理 Tree Shaking 在去除代码冗余过程中,程序会从入口文件出发...2、经过压缩工具(UglifyJSPlugin)压缩后,未使用接口代码会被删除。原理显而易见,未被 __webpack_require__.d 引用,所以压缩工具可以将其安全移除。

69130

如何自己实现一个简单webpack构建工具 【精读】

转换代码,编译代码,输出代码 4.最终形成打包后代码 webpack打包原理 1.先逐级递归识别依赖,构建依赖图谱 2.将代码转化成AST抽象语法树 下图是一个抽象语法树: ] 3.在AST阶段中去处理代码.../test2.js' }, code: '"use strict";\n\nvar _test = _interopRequireDefault(require("..../test2.js': { dependencies: {}, code: '"use strict";\n\nObject.defineProperty(exports,...,以及依赖代码内容,只需要处理输出即可 最终处理代码输出 const generateCode = (entry) => { // 注意:我们 gragh 是一个对象,key是我们所有模块绝对路径.../test2.js":"./test2.js"},"code":"\"use strict\";\n\nvar _test = _interopRequireDefault(require(\".

1K30

一文快速上手Rollup,JavaScript类库打包好帮手

这里我简单对webpack和rollup做一个比较: 总体来说webpack和rollup在不同场景下,都能发挥自身优势作用。...所以当开发应用时可以优先选择webpack,但是rollup对于代码Tree-shaking和ES6模块有着算法优势上支持,若你项目只需要打包出一个简单bundle包,并是基于ES6模块开发,可以考虑使用...如我们所预料,控制台输出了柯森。 到这里,我们就用rollup打包了一个最最简单demo。 可能很多同学看到这里对于上面命令行中参数不是很明白,我依次说明下: -f。...这里,我对配置文件选项做下简单说明: input表示入口文件路径(老版本为 entry,已经废弃) output表示输出文件内容,它允许传入一个对象或一个数组,当为数组时,依次输出多个文件,它包含以下内容...我们在src目录下添加es6.js文件(⚠️ 这里我们使用了 es6 中箭头函数): const a = 1; const b = 2; console.log(a, b); export default

1.9K21

为什么 CommonJS 会使你程序包变大

/utils'; console.log(add(1, 2)); 使用相同 webpack 配置,构建我们程序并查看输出文件, 现在为 40 字节,并带有以下输出内容: (()=>{"use strict...要注意,即使你在 index.js 中用了 ES2015 规则,但是如果你用模块是 CommonJS 模块,则打包后大小也会受到影响。 为什么 CommonJS 使程序包更大?...该插件将所有模块作用域合并为一个闭包,并使代码在浏览器中执行更快。...由于代码太长,我只分享其中一小部分: ... (() => { "use strict"; /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE...这次,我们没有把来自 utils.js 和 index.js 所有符号放在同一个命名空间下,而是在运行时动态地使用了__webpack_require__ add 函数。

93130

深入浅出 React 18 中严格模式

虽然严格模式作为 React 一个特性已经有很长一段时间了,但 v18 使它在捕获早期 bug 方面更有效,从而使代码库更可预测。 在本文中,你将了解严格模式以及引入它初衷。...你将了解它各种特性,以及 v18 版本如何改进其 API 并提供与 hook 更好兼容性。 1. React 严格模式介绍 严格模式可以被认为是 "use strict" 表示。..."use strict"; x = 3.1415; 上面的例子会抛出一个错误,因为 x 没有定义。注意在文件顶部添加 "use strict" 是如何确保这一点。...在没有添加 "use strict" 情况下,你甚至可能不会得到这个错误,因为如果没有严格类型定义(如 "use strict", TypeScript 等),JavaScript 往往会执行奇怪行为... 现在,我们将更深入地研究严格模式各种含义,并帮助在开发早期发现问题。 2.

2.2K20

Webpack 4教程:为什么要优化代码

如果不配置它,会得到一个警告,并应用上默认值production。如果使用了mode: "produnction",Webpack会为你设置一些相关配置。因此,你打包输出会更好地用于生产环境。...(function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(_.../***/ }), /* 2 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict";...这样一来,输出包现在都在一个scope里了。更少函数意味着更少运行时开销。 注意,我在这个例子中没有使用任何优化配置。由于优化器其实已经知道模块之间内部依赖,它能更好地完成任务。  ...// main.js (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // 串起来模块: .

50330

Webpack 实战入门系列(三):生产配置、样式文件分离及输出清理

生产及开发环境配置 然后将webpack.config.js重命名为webpack.dev.js,再将内容修改为以下内容: 'use strict' const merge = require('webpack-merge.../dist', hot: true } }); 再新建一个webpack.prod.js文件,即生产环境配置,输入以下内容: 'use strict' const merge = require...直接上代码,三个配置文件具体代码如下: webpack.common.js 'use strict' const path = require('path'); const webpack = require...'use strict' const merge = require('webpack-merge'); const common = require('....我们运行npm run dev时,它会走开发环境配置,仍然可以正常解析样式文件。 清理输出文件 接下来讲最后webpack入门最后一个知识点:清理输出文件。

78820
领券