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

在使用require语法时,如何让webpack不捆绑json?

在使用require语法时,可以通过以下两种方式让webpack不捆绑JSON文件:

  1. 使用json-loader插件:json-loader是webpack的一个加载器,可以将JSON文件转换为JavaScript对象。在webpack配置文件中,可以通过以下方式配置json-loader:
代码语言:javascript
复制
module: {
  rules: [
    {
      test: /\.json$/,
      loader: 'json-loader'
    }
  ]
}

然后在代码中使用require语法引入JSON文件,webpack会自动使用json-loader进行处理,不会将JSON文件捆绑到输出文件中。

  1. 使用resolve.extensions配置:在webpack配置文件中,可以通过resolve.extensions配置项指定可以省略的文件扩展名。可以将.json文件添加到resolve.extensions中,这样在使用require语法引入JSON文件时,可以省略文件扩展名,webpack会自动查找并加载对应的JSON文件。
代码语言:javascript
复制
resolve: {
  extensions: ['.js', '.json']
}

然后在代码中使用require语法引入JSON文件时,可以省略文件扩展名,webpack会自动查找并加载对应的JSON文件。

以上是两种常用的方法,可以让webpack在使用require语法时不捆绑JSON文件。

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

相关·内容

发布、传输和安装现代 JavaScript 以实现更快的应用程序

仅现代 如果要发布采用现代代码的软件包,并使用将其用作依赖项处理转换,则仅使用 "exports" 字段。 { "name": "foo", "exports": "....这仍然是一个传统捆绑包,包含除了 import/export 语法之外的任何现代代码,所以使用这种方法来传输具有传统回退、但仍然针对捆绑进行了优化的现代代码。...您所依赖的一些 npm 包很有可能已经使用现代语言特性。有许多选择可使用 npm 中的现代代码而不会破坏应用程序旧版浏览器中的体验,但总体思路是编译系统将依赖项转换为与源代码相同的目标语法。...webpackwebpack 5 开始,现在可以配置 webpack 在生成捆绑包和模块的代码使用语法。这不会转换您的代码或依赖项,只影响由 webpack 生成的“粘附”代码。...webpack-plugin-modern-npm 使用这种技术来编译 package.json 中具有 "exports" 字段的 npm 依赖项,因为它们可能包含现代语法: // webpack.config.js

1K20

向现代JavaScript转型——发布、传输和安装现代 JavaScript以实现更快的应用程序

仅现代 如果要发布采用现代代码的软件包,并使用将其用作依赖项处理转换,则仅使用 "exports" 字段。 { "name": "foo", "exports": "....这仍然是一个传统捆绑包,包含除了 import/export 语法之外的任何现代代码,所以使用这种方法来传输具有传统回退、但仍然针对捆绑进行了优化的现代代码。...您所依赖的一些 npm 包很有可能已经使用现代语言特性。有许多选择可使用 npm 中的现代代码而不会破坏应用程序旧版浏览器中的体验,但总体思路是编译系统将依赖项转换为与源代码相同的目标语法。...webpackwebpack 5 开始,现在可以配置 webpack 在生成捆绑包和模块的代码使用语法。这不会转换您的代码或依赖项,只影响由 webpack 生成的“粘附”代码。...webpack-plugin-modern-npm 使用这种技术来编译 package.json 中具有 "exports" 字段的 npm 依赖项,因为它们可能包含现代语法: // webpack.config.js

2.7K185

你可能不知道的9条Webpack优化策略

// `disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。...// 相对于捆绑输出目录。 statsFilename: "stats.json", // stats.toJson()方法的选项。...已不再维护,这里推荐使用 ❞ uglifyjs-webpack-plugin 安装 yarn add -D uglifyjs-webpack-plugin 示例 const UglifyJsPlugin...使用webpack进行打包时候,对于依赖的第三方库,比如vue,vuex等这些不会修改的依赖,我们可以它和我们自己编写的代码分开打包,这样做的好处是每次更改我本地代码的文件的时候,webpack只需要打包我项目本身的文件代码...vendor-manifest.json文件就是一个第三方库的映射而已。 怎么项目中使用

1.6K30

深入了解Webpack 5

... } 如果运行npm run build,您将看到Webpack如何为您捆绑所有文件。...一旦脚本经历了成功,你可以看到 DIST / bundle.js 飞行中生成的文件,但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...Webpack插件 Webpack具有庞大的插件生态系统。通过使用Webpack开发或生产模式已经隐式使用了其中的几个。但是,还有其他Webpack插件可以改善您的Webpack捆绑包体验。...例如,让我们介绍可用于分析和可视化Webpack捆绑包的加载项。 package.json中 ,为您的构建过程引入一个新的npm脚本,但是这次使用Webpack插件: { ......让我们看看如何在 build-utils / webpack.config.js 文件中使用它们: const { merge } = require('webpack-merge'); const

3.5K30

H5 基础脚手架:极速构建项目

前言 构建篇的 h5 项目构建配置,没有阅读过前文的读者拉到下方系列目录即可预览全系列 虽然 webpack 的优化配置博文烂大街了,还是稍微提一下,补充完全体的系列里面 Webpack 辅助分析插件...// `disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。...defaultSizes: 'parsed', // 默认浏览器中自动打开报告 openAnalyzer: true, // 如果为true,则Webpack Stats JSON文件将在...// 相对于捆绑输出目录。 statsFilename: 'stats.json', // stats.toJson()方法的选项。...的 splitChunks 分割代码,上述一个是提取公共模块引用,一个是提取第三方模块引用 这玩意拆分要看自己的需求,不过对构建速度提升不多,对项目使用优化有需求的可以试试 CDN 配置(推荐 & 建议

87330

Angular10配置webpack打包 「详细教程」

当工作空间文件结构到位,可以命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用(除非你创建其它应用之后更改了默认值)。...当你向应用中添加更多组件,它们也必须在这里声明。 app/package.json 此文件只会出现在使用 --strict 模式创建的应用中。此文件不是供包管理器使用的。...--project getting-started 备注:这一步通过NPM安装包,Angular >= 7 and CLI >= 7版本中,您的项目使用自定义生成器的更新您的angular.jsonng...//  `disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。      ...这对于文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以插件为你生成一个HTML文件,这个插件有两个重要作用。

4.8K20

webpack深入浅出实战系列

你对 webpack 再也不会畏惧,它真正成为你的得力助手! 本文从下面几个课题来实现 课题 1:初探 webpack?...--report # 开启打包分析 webpack-box build:ssr # 编译ssr webpack-box ssr:server # server 端运行 package.json.../index.css') console.log(css) css 文件并不能被 js 识别,webpack例外,上述的写法不出意外会报错 我们如何 webpack 识别 css 呢,答案就在...import 或者 require.ensure 语法第一节已经讲解 使用 babel-plugin-import 插件按需引入一些组件库 Bundle Splitting 将公共的包提取到 chunk-vendors...用途 当我们访问一个对象属性不必担心这个对象是 undefined 而报错,导致程序不能继续向下执行 解释 ?

1.6K11

使用Webpack提升Vue.js应用程序的4种方法(翻译)

本文翻译自,翻译技巧不太好,喜勿碰 : 4 Ways To Boost Your Vue.js App With Webpack 众所周知,webpack 是 开发 vue.js 单页面应用程序的必备工具...它比完整版本小20KB,因此如果可以的话值得使用。 默认情况下,仅使用运行时构建,因此,每次使用 import vue from 'vue' ,都将使用它。您的项目中,这就是您所得到的。...Webpack可以输出文件名将此哈希附加到文件名中: output: { filename: '[name]....require 要从服务器加载异步组件的代码,请使用Webpack require语法 这将指示Webpack构建将async-component捆绑在一个单独的bundle中,更好的是,Webpack...延迟加载是使用Vue和Webpack实现代码拆分的一种形式化方法。 const HomePage = resolve => require(['.

2.6K20

理解二分法:CommonJS vs. ECMAScript Modules

require语句成为主角,通过同步加载模块。引入ECMAScript模块另一方面,为浏览器设计的ECMAScript模块(mjs)引入了异步模块格式。模块内的代码显式导入之前执行。...使用Babel进行转译利用Babel两种语法之间进行转译。安装Babel和必要的预设,创建配置文件,并在package.json中添加构建脚本。2....使用Webpack进行打包Webpack捆绑解决方案,将CommonJS和ECMAScript模块合并成一个统一的捆绑包。安装Webpack和必要的加载器,创建配置文件,并添加构建脚本。3....本地采用ESM对于可以控制的项目,请考虑完全采用ECMAScript模块,使用.mjs扩展名或在package.json中设置"type": "module"。...使用.cjs扩展名更新CommonJS模块。这些策略为双重JavaScript模块系统的复杂环境中导航提供了一条路线,确保应用程序中实现兼容性和共存。

18440

前端模块化方案:前端模块化插件化异步加载方案探索

js语言本身并不支持模块化,同时浏览器中js和服务端nodejs中的js运行环境是不同的,如何实现浏览器中js模块化主流有两种方案:requirejs/seajs: 是一种在线“编译”模块的方案,相当于页面上加载一个...上面两个用法建议同时使用。虽然Require存在各种特殊情况,但是其灵活性和强大性还是支持它成为浏览器端流行的加载器。...npm 包,最终会转换为 commonJS (require) 类似方式,浏览器使用。...bundle-name.js”>对于前端,你可以最小化合并核心代码,然后可选模块之后需要加载,这样即节约了带宽也不影响模块编程功能实现。...,任务更加简洁和容易上手。

1.3K20

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

安装和使用 npm install --save-dev webpack-bundle-analyzer webpack.config.js中: let BundleAnalyzerPlugin =...require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [new BundleAnalyzerPlugin...// `disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。...defaultSizes: 'parsed', // 默认浏览器中自动打开报告 openAnalyzer: true, // 如果为true,则Webpack Stats JSON文件将在...之后 官方分析工具里上传文件即可对你的bundle进行分析 ==这里注意==: 这里生成的时候,webpack.config.js 文件中不要有console,打印信息, 否则,他会加入到 stats.json

2.9K30

小程序工程化系列(一):文件依赖分析

四、依赖分析如何实现 Webpack 有一个很重要的概念就是入口,你在编译必须要指定一个入口,Webpack 会从入口开始分析它的所有依赖, Web 页面构建中,入口一般对应到页面的主 js。...如何处理图片字体等资源的依赖关系 图片资源,其实不太好处理,app.json 和 wxml 都可以使用相对路径的图片,app.json 中用于导航的图片路径可以直接解析,但用于 wxml 文件中的图片路径...不同操作系统的路径问题 前面提到我们各 loader 中解析文件路径后,会转换成 require(/path/to/file),如果大家看了源码,应该有注意到借助 Webpack 的 context...计算完路径后做了一个 replace(/\\/g, '/') 处理,这个主要是因为 win 系统生成路径 d:\\path\\to\\file 经过 Webpack 解析,每解析一次就会消耗一次反斜杠...规范的路径写法兼容 主要是资源引用时,写法规范,有以下几点: js文件的引用,比如 require('util'),就会有很大歧义,从规范 CommonJS 或者 AMD 来讲,这代表引用的是 util

1.9K40

webpack配置完全指南_2023-03-01

动态配置入口文件 动态打包所有子项目 当构建项目包含多个子项目,每次增加一个子系统都需要将入口文件写入 webpack 配置文件中,其实我们webpack 动态获取入口文件,例如: // 使用 glob...我们使用 webpack 进行打包的时候,webpack 提供了 hash 的概念,所以我们可以使用 hash 来打包。...(创建 html ,并捆绑相应的打包文件) 、clean-webpack-plugin (清除原有打包文件) 一起使用。...// 打包包中包含所属模块的信息的注释 pathinfo: false }, optimization: { // 不使用可读的模块标识符进行调试 namedModules...,纳入打包范围内,例如你项目中使用了 jquery ,并且你 html 中引入了它,那么在打包就不需要再把它打包进去: <script src="https://code.jquery.com

3.1K10

「微前端架构」微前端-Angular风格-第2部分

从功能模块转移到迷你应用程序 角功能模块以及Webpack捆绑销售给我们我们需要的代码分离,但这是不够的,因为Webpack只允许我们创建包作为一个构建过程的一部分,我们希望能够产生一个单独的JS包,这是建立不同的时间...share -loader允许我们指定希望应用程序之间共享的模块列表,它将一个给定的模块捆绑到一个应用程序js捆绑包中,并提供一个其他捆绑包访问该模块的名称空间。...share-loader', options: { modules: [/@angular/, /@lodash/], namespace: 'container-app' } }] } 应用程序B webpack.json...通过这种方式,我们可以跨应用程序共享一些模块,但是维护我们希望共享的其他模块。...所有的通信都是通过一个由每个包装器实例承载的事件总线实例来完成的,通过使用一个事件系统,我们有一种解耦的方式来通信数据的输入和输出,当一个小型应用程序从主应用程序中清除,我们可以很容易地清除这种方式。

4.8K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券