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

Webpack:引用配置中当前正在处理的文件名

Webpack是一个现代化的静态模块打包工具,它主要用于前端开发中的模块化管理和打包。通过Webpack,开发者可以将多个模块(包括JavaScript、CSS、图片等)打包成一个或多个静态资源文件,以便在浏览器中加载和使用。

在Webpack的配置文件中,可以通过使用__filename变量来获取当前正在处理的文件名。__filename是Node.js中的一个全局变量,它表示当前模块的文件名,包括文件的绝对路径。

在Webpack的配置文件中,可以使用__filename变量来根据当前处理的文件名进行一些特定的配置。例如,可以根据不同的文件名应用不同的加载器(Loader),或者根据文件名生成不同的输出文件。

以下是一个示例的Webpack配置文件,展示了如何使用__filename变量:

代码语言:txt
复制
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    // 插件配置
  ],
  resolve: {
    extensions: ['.js', '.css'],
  },
};

在上述配置文件中,entry指定了入口文件为./src/index.jsoutput指定了输出文件的名称为[name].bundle.js,其中[name]会根据当前处理的文件名动态生成。

需要注意的是,Webpack的配置文件是一个JavaScript模块,因此可以使用JavaScript的任何语法和变量。在配置文件中,可以根据需要使用__filename变量来实现更加灵活和个性化的配置。

推荐的腾讯云相关产品:腾讯云对象存储(COS)。腾讯云对象存储(COS)是一种高扩展性、低成本的云端存储服务,适用于存储和处理大规模非结构化数据。您可以通过腾讯云对象存储(COS)将静态资源文件(如打包后的JavaScript、CSS、图片等)上传到云端,并在网页中引用这些文件。腾讯云对象存储(COS)具有高可靠性、高可用性和高性能的特点,可以满足各种规模和需求的应用场景。

更多关于腾讯云对象存储(COS)的信息,请访问:腾讯云对象存储(COS)产品介绍

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

相关·内容

webpack配置(configuration)

配置(configuration) 少有 webpack 配置看起来很完全相同。这是因为 webpack 配置文件,是导出一个对象 JavaScript 文件。...此对象,由 webpack 根据对象定义属性进行解析。...因为 webpack 配置是标准 Node.js CommonJS 模块,你可以做到以下事情: 1.通过 require(…) 导入其他文件 2.通过 require(…) 使用 npm 工具函数...--env)时,访问命令行接口(CLI)参数 2.导出不确定值(调用 webpack 两次应该产生同样输出文件) 3.编写很长配置(应该将配置拆分为多个文件) 基本配置 webpack.config.js...作为导出一个配置对象/配置函数替代,可能需要导出多个配置对象(从 webpack 3.1.0 开始支持导出多个函数)。

50910

webpack动态import()打包后文件名称定义

动态import()打包出来文件name是按照0,1,2...依次排列,如0.js、1.js等,有的时候我们希望打包出来文件名是打包前文件名称。...要实现这,需要经历3个步骤: 1.在webpack配置文件output添加chunkFilename。命名规则根据自己项目来定,其中[name]就是文件名,这一块更详细说明请点击这里。...[hash:8].js',//动态import文件名 }, //其他代码... 2.在动态import()代码处添加注释webpackChunkName告诉webpack打包后chunk名称(注释内容很重要...,不能省掉),这里打包以后name就是MyFile。.../containers/MyFile`) 3.大多数情况下我们使用动态import()是通过循环来做,这样我们就不得不引入变量了,使用[request]来告诉webpack,这里值是根据后面传入字符串来决定

2.6K20

C++引用处理

目录 1.引用基本用法 1.1 引用实质 1.2 引用用法  2.函数引用 3.引用本质 4.指针引用 5.常量引用 ---- 1.引用基本用法 引用是C++对C重要扩充。...在c/c++,指针用法基本一致。但是C++增加了另一种给函数传递地址途径,这就是引用传递,也存在去其他语言,并不会是C++独有。...1.1 引用实质 原类型 &别名 = 旧名 1.2 引用用法 注意事项: 引用一旦初始化,不能更改引用指向 引用定义时必须初始化 不能引用NULL 引用可以引用任意类型包括数组...cout << arr[i] << " "; } cout << endl; } int main() { test02(); return 0; }  2.函数引用...temp = *x; *x = *y; *y = temp; } void test01() { int a = 10; int b = 20; swap(&a,&b); } 在C++可以也使用引用很好解决这个问题

41930

SHELL技巧:处理文件名那些空格

但是这种命名方式给Linux命令行工具和Shell带来了困扰,因为大多数命令,都是默认以空格做为值与值之间分隔符,而不是做为文件名一部分。 看下面的脚本,我们可以了解更清楚: ?...执行结果如下: ? 实际上,当前目录文件只有两个: ? 对于简单文件名,如上例,我们也可以通过 for i in *doc 这样简单方法来获得文件列表。...通过 "*\ *" 这样技巧可以避免上面所说问题,但是在应用mv或其他操作时,还是会出现问题。 ? 上面的问题,可以通过将变量放入引号("$i")解决,通常情况下,引号空格可以被正确处理。...但这并不是一个恒久解决办法,因为我们无法处理管道、子Shell等复杂情况。...,先将空格替换为特殊自定义符号,然后在处理结束时候,再替换回来。

1.7K10

webpack4 React 全家桶配置指南,实战!

--g 是将当前webpack安装到全局下面,可以在node安装目录下找到全局/node_modules。...更多配置文档参考这里 webpack-dev-server默认情况下会将output内容放在内存,是看不到物理文件,如果想要看到物理dev下面的文件可以安装write-file-webpack-plugin...多入口文件配置 在之前配置,都是基于单入口页面配置,entry和output只有一个文件,但是实际项目很多情况下是多页面的,在配置多页面时,有2方法可以选择: 1.在entry入口配置时,传入对象而不是单独数组...更多配置可以参考这里 4.如果想要在代码逻辑获取当前route路径需要引入router-reducer: 新建main.js: import { combineReducers } from 'redux...”, “async”(默认) 或 “all”: initial: 入口chunk,对于异步导入文件不处理 async: 异步chunk,只对异步导入文件处理 all: 全部chunk 编辑可能存在

1.8K20

Linux 系统查找正在运行进程完整命令、当前工作目录等信息方法

Linux 系统查找正在运行进程完整命令、当前工作目录等信息方法 一 引言 在某些系统故障排查过程,需要找出某个应用程序工作目录、完整命令行等信息。...二 知识要点 众所周知,/proc是Linux系统内一个伪文件系统,,存储当前内核运行状态一系列特殊文件,用户可以通过这些文件查看有关系统硬件及当前正在运行进程信息,甚至可以通过更改其中某些文件来改变内核运行状态...针对一些常见内容及要点,收集整理如下: cmdline:启动当前进程完整命令,但僵尸进程目录此文件不包含任何信息; cwd:指向当前进程运行目录一个符号链接; environ:当前进程环境变量列表...;此文件仅可由实际启动当前进程UID用户读取;(2.6.24以后内核版本支持此功能); maps:当前进程关联到每个可执行文件和库文件在内存映射区域及其访问权限所组成列表; mem:当前进程所占用内存空间...,如下所示,每行表示一个属性信息;其详细介绍请参见 procman手册页; task:目录文件,包含由当前进程所运行每一个线程相关信息,每个线程相关信息文件均保存在一个由线程号(tid)命名目录

1.8K20

Webpack多入口文件、热更新等体验

:webpackConfig配置项 options:在模板文件可以获取webpack配置项。...3个以外页面引用时才打包 children 返回,把第三方vendor包,分解到业务包 chunks 数组,从指定源模块提供共用vendor包 1. vendor打成一个包: entry:{...样式文件单独存在,但不能处理静态资源 extract-text-webpack-plugin:抽取样式为单独文件 参数配置说明 ExtractTextPlugin.extract(arg1,arg2,...,表示当前loader路径 ExtactTextPlugin在Plugins构造时,至少需要传入一个文件名参数 filename文件名,可以指定一个固定,也可用[name]....autoprefixer:一个postcss插件,用于css3兼容前端处理 browsers:配置浏览器版本,如:browsers:['last 2 versions'] 四、热更新 安装 webpack-dev-server

2.6K60

18款Webpack插件,总会有你想要

事件钩子,钩子替换能拿到当前编译compilation对象,如果是异步编译插件的话可以拿到一部分callback 完成自定义子编译流程并处理complition对象内部数据 如果异步编译插件的话...将WebPackentry配置相关入口chunk状语从句:extract-text-webpack-plugin抽取CSS样式插入到该插件提供template或者templateContent...配置项指定内容基础上生成一个HTML文件,具体插入方式英文将样式link插入到head元素,script插入到head或者body。...id,来代表当前HappyPack是用来处理一类特定文件 id: 'babel', // 如何处理.js文件,用法和Loader配置中一样 loaders: ['babel-loader...const Webpack = require('webpack')plugins: [ //moment这个库,如果引用了.

1.3K42

Webpack loader 之 file-loader

简介 安装 npm install --save-dev file-loader 用法 默认情况下,生成文件文件名就是文件内容 MD5 哈希值并会保留所引用资源原始扩展名。..."/public/path/bd62c377ad80f89061ea5ad8829df35b.png" 当然如果不想使用默认文件名,我们也可以通过配置 options.name 选项来设置输出文件名命名规则...其实除了以上常用四个占位符之外,还有支持 [N],N 是数值类型,表示当前文件名按照查询参数 regExp 匹配后获得到第 N 个匹配结果。...其实本文介绍 file-loader 并不会对文件内容进行任何转换,只是复制一份文件内容,并根据相关配置生成对应文件名,所生成文件名一般会带上 hash 值,从而避免文件重名导致冲突。...接着 file-loader 会先调用 loaderUtils.getOptions() 方法,获取当前 loader 对应配置对象,然后基于已定义 Schema,验证配置对象有效性。

1.6K40

Vue 脚手架项目分析

build以及configjs .eslintrc.js: 代码规范化配置文件 .gitignore: 忽略上传一些文件或配置 .postcsssrc.js: 用js来处理css index.html...postcss-loader 处理普通CSS文件和 *.vue 文件 CSS 之间共享相同配置,这是推荐做法。...new HtmlWebpackPlugin({ // 自动生成html文件,比如编译后文件引用 filename: ‘index.html’, // 生成文件名...生产环境下webpack配置,通过merge方法合并webpack.base.conf.js基础配置。module处理,主要是针对css处理。...// 原因是vendor包含了webpack在打包过程中会产生一些运行时代码,运行时代码实际上保存了打包后文件名。 // 当修改业务代码时,业务代码js文件hash值必然会改变。

1.7K40

十七.Webpack使用

输出文件路径对main.js进行处理webpack src/js/main.js dist/bundle.js 使用webpack配置文件简化打包时候命令 在项目根目录创建webpack.config.js...由于运行webpack命令时候,webpack需要指定入口文件和输出文件路径,所以,我们需要在webpack.config.js配置这两个路径: //path 模块提供了一些用于处理文件路径小工具...,会默认来查找webpack.config.js,并读取这个文件中导出配置对象,来进行打包处理 module.exports = { //dirname作用:动态获取当前文件夹绝对路径...filename: 'bundle.js' // 配置输出文件名 } } 实现webpack实时打包构建 由于每次重新修改代码之后,都需要手动运行webpack打包命令,比较麻烦..._dirname, 'dist'), // 配置输出路径 filename: 'bundle.js' // 配置输出文件名 }, plugins

62320

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券