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

webpack条件css文件名输出依赖于条目名称

webpack是一个现代化的前端构建工具,它可以帮助开发者将多个前端资源(如HTML、CSS、JavaScript等)进行打包和优化,以提高网页性能和开发效率。

在webpack中,条件CSS文件名输出依赖于条目名称,意味着根据不同的入口文件(条目)来生成对应的CSS文件名。这可以通过webpack的配置文件来实现。

首先,我们需要在webpack配置文件中定义多个入口文件(entry),每个入口文件对应一个条目。例如:

代码语言:txt
复制
module.exports = {
  entry: {
    main: './src/main.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  // 其他配置项...
};

接下来,我们可以使用webpack的插件来生成对应的CSS文件名。一个常用的插件是MiniCssExtractPlugin,它可以将CSS提取为独立的文件。我们可以在webpack配置文件中进行如下配置:

代码语言:txt
复制
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    main: './src/main.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  output: {
    filename: '[name].bundle.js',
    // 其他输出配置...
  },
  module: {
    rules: [
      // CSS加载器配置...
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css'
    })
  ]
};

上述配置中,[name]表示入口文件的名称,通过这样的配置,webpack会根据入口文件的名称生成对应的CSS文件名。例如,对于入口文件main.js,生成的CSS文件名为main.bundle.css

在实际应用中,条件CSS文件名输出可以帮助我们更好地组织和管理前端资源,使得不同页面或模块的样式能够独立打包和加载,提高网页性能和开发效率。

腾讯云提供了一系列与云计算相关的产品和服务,例如云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据实际需求和场景进行选择。

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

相关·内容

Webpack】319- Webpack4 入门手册(共 18 章)(上)

打包测试 开始第一次打包任务: npx webpack // 输出: Hash: 030b37b6b9a0b4344437 Version: webpack 4.39.1Time: 308ms Built..."css-loader"] } ] } 参数介绍: test:需要匹配的模块后缀名; use:对应处理的 loader 插件名称(处理顺序是从右往左)。...打包测试 npx webpack // 输出: Hash: 28b3965aa1b6a0047536 Version: webpack 4.39.1 Time: 482msBuilt at: 2019...', // 最终输出文件名 chunkFilename: '[id].css' }) ] 然后重新打包,这时候可以看到我们 dist 目录下就多了个 main.css 文件: 因为现在已经将...为文件名添加 hash 值 由于我们打包出来的 css、 js 文件是静态文件,就存在缓存问题,因此我们可以给文件名添加 hash 值,防止缓存。

1.8K40
  • webpack 简单配置

    2.安装   前提条件,请确保安装了Node.js的最新版。   ...3.建立项目的webpack 文件     首先初始化目录: npm init     然后安装webpack: npm install webpack --save-dev   如果webpack 的配置文件不使用默认的文件名.../app/entry-b2"] },     (2) Output 位于对象最顶级键(key),包括了一组选项,指示webpack 如何输出,       以及哪里输出,和他你所打包或使用webpack...例如:              output: {             // webpack 如何输出结果的相关选项             path: path.resolve(__dirname...url 相对于 HTML 页面             library: "MyLibrary", // string,             // 导出库(exported library)的名称

    85270

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

    html文件名称 chunks:包含的文件,可以entry和其他模块chunk的模块,插件导入到 模板时 没有排序,但都是。...可以是字符串,或者是数组,如果指定为entry中一个名称,则只产生此vendor,也可以是一个入口文件列表 filename 输出文件名 minChunks 单独文件最小引用数,如设置3,表示同一个模块只有被...用manifest实现js库的增量更新 如果输出文件名包含hash值,需要引入以下两个插件: HashedModuleIdsPlugin:算hash值 利用CommonsChunkPlugin配置,他是...[contenthash]来指定文件名,[name]:与entry中的chunk名称一致,[id]:将entry的chunk的id一致;[contenthash]:根据内容生成hash值 参数名称 说明...[ext]' } ] } 参数说明: 参数名称 说明 name 配置输出文件名,例如:name=[name].[hash].

    2.6K60

    webpack超详细教程!入门一篇就够了

    /dist'), //输出文件的路径 filename: 'bundle.js' //指定输出文件名 } } 在 webpack.config.js...注意: webpack-dev-server 这个工具是依赖于 webpack 的,要想使用这个工具,就必须安装 webpack webpack-dev-server 打包的文件会直接存放在内存中 添加参数...,//入口文件 output: { path: path.join(__dirname,'/dist'), filename: 'bundle.js' //指定输出名称...,//入口文件 output: { path: path.join(__dirname,'/dist'), filename: 'bundle.js' //指定输出名称...,会将浏览器中图片文件名设置成路径中一样的文件名,因为经过上面的步骤只会将图片的路径设置成hash值 13 处理字体图片的url路径 在 webpack.config.js 中进行设置 const path

    9.2K52

    Webpack学习笔记

    app/main.js", output: { //打包后的文件存放的地方 path: __dirname + "/public", //打包后输出文件的文件名...app/main.js", output: { //打包后的文件存放的地方 path: __dirname + "/public", //打包后输出文件的文件名...app/main.js", output: { //打包后的文件存放的地方 path: __dirname + "/public", //打包后输出文件的文件名...在app目录下,创建一个Html文件模板,这个模板包含title等其它你需要的元素,在编译过程中,本插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon等文件,在本例中我们命名模板文件名称为...output: { //打包后的文件存放的地方 path: __dirname + "/build", //打包后输出文件的文件名 filename

    1.4K20

    入门webpack的最佳实践(基于webpack4.X 5.X)-- 运行体验优化

    目录 splitChunks 懒加载 prefetch 与 preload css内联 splitChunks 当我们打包的模块比较大的时候,我们可以通过splitChunks来进行分包配置,从 webpack...模式下,入口文件和动态引入文件都会进行打包,作用最强大 initial 模式下,会将入口文件中的依赖包重新切割为一个新的文件,其它文件中动态引入的不会进行拆分 async(默认值)模式下,入口文件中的模块输出一个依赖包...会尝试对该包再进行分割 test:匹配规则,说明要匹配的项,这里是匹配匹配绝对模块资源路径或 chunk 名称 name: 打包之后的文件名,从 webpack 5 开始,不再允许将 entry 名称传递给...的依赖包 懒加载 懒加载其实也叫动态加载,顾名思义,就是在项目中,不一开始就加载所有资源,而是在使用到的时候再进行加载,依赖于ES Module,比如说, 有一个asyncImportModule.js...内联 在打包时,我们可以将css通过style标签内联到页面中,这样做的好处是可以让页面样式更快的渲染出来,也能避免页面闪动,不过在webpack5已经放弃了这种方法。

    1.4K30

    【Cute-WebpackWebpack4 入门手册(共 18 章)

    "css-loader"] } ] } 参数介绍: test:需要匹配的模块后缀名; use:对应处理的 loader 插件名称(处理顺序是从右往左)。...', // 最终输出文件名 chunkFilename: '[id].css' }) ] 然后重新打包,这时候可以看到我们 dist 目录下就多了个 main.css 文件: [webpack06...] 七、webpack文件名添加 hash 值 由于我们打包出来的 css、js 文件是静态文件,就存在缓存问题,因此我们可以给文件名添加 hash 值,防止缓存。...[hash].css' }), ], } 配置完成后,重新打包,就可以看到文件名中包含了 hash 值了: [webpack08] 2....webpack-bundle-analyzer 使用交互式可缩放树形图可视化 webpack 输出文件的大小。

    2.3K31

    入门webpack的最佳实践(基于webpack4.X 5.X)-- 运行体验优化

    模式下,入口文件和动态引入文件都会进行打包,作用最强大initial 模式下,会将入口文件中的依赖包重新切割为一个新的文件,其它文件中动态引入的不会进行拆分async(默认值)模式下,入口文件中的模块输出一个依赖包...会尝试对该包再进行分割test:匹配规则,说明要匹配的项,这里是匹配**匹配绝对模块资源路径或 chunk 名称**name: 打包之后的文件名,从 webpack 5 开始,不再允许将 entry 名称传递给...{cacheGroup}.test 或者为 {cacheGroup}.name 使用现有的 chunk 的名称。...,顾名思义,就是在项目中,不一开始就加载所有资源,而是在使用到的时候再进行加载,依赖于ES Module,比如说,有一个asyncImportModule.js的文件,里面的方法返回一个新的组件// 用于动态引入的...内联在打包时,我们可以将css通过style标签内联到页面中,这样做的好处是可以让页面样式更快的渲染出来,也能避免页面闪动,不过在webpack5已经放弃了这种方法。

    1.1K30

    面试官常问的那些webpack插件-超详细总结

    Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server,后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面,HRM 是只更新修改的部分。...template: path.join(__dirname, '/index.html'), }), new CleanWebpackPlugin(), // 所要清理的文件夹名称 ]...编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。...// gzip压缩配置 test: /\.js$|\.html$|\.css/, // 匹配文件名 threshold: 10240, // 对超过10kb的数据进行压缩...任何时候,当 identifier 被当作未赋值的变量时, module 就会自动被加载,并且 identifier 会被这个 module 输出的内容所赋值。这是 webpack 自带的插件。

    1.3K10

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

    Hot-Module-Replacement的热更新是依赖于webpack-dev-server,有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面,HRM是只更新修改的部分。...template: path.join(__dirname, '/index.html'), }), new CleanWebpackPlugin(), // 所要清理的文件夹名称] 04、提取文本...编译出现错误时,使用NoEmitOnErrorsPlugin来跳过输出阶段。这样可以确保输出资源不会包含错误。...// gzip压缩配置 test: /\.js$|\.html$|\.css/, // 匹配文件名 threshold: 10240, // 对超过10kb的数据进行压缩 deleteOriginalAssets...任何时候,当identifier被当作未赋值的变量时,module就会自动被加载,并且identifier会被这个模块输出的内容所赋值。这是webpack自带的插件。

    1.4K42

    .vue文件结构(vue框架项目)

    build文件夹里面是对 webpack 开发和打包的相关设置,包括入口文件、输出文件、使用的模块等; build.js文件 构建环境下的配置: loading动画、删除创建目标文件夹、webpack...文件 基本的webpack配置   配置webpack编译入口   配置webpack输出路径和命名规则   配置模块resolve规则   配置不同类型模块的处理规则 'use strict'...,config/index.js中build.assetsRoot filename: '[name].js', // 输出文件名称默认使用原名 publicPath: process.env.NODE_ENV...[chunkhash].js'), // 编译输出文件名格式 chunkFilename: utils.assetsPath('js/[id]....[chunkhash].js') // 没有指定输出名的文件输出文件名格式 }, // 配置webpack插件 plugins: [ // http://vuejs.github.io

    1.4K10

    webpack系列---loader的使用

    引入 对于之前的案例----隔行变色,如果我们要自定义一些css样式怎么办,传统的方法是在外部定义css,在html中引入,这种方式又会引发二次请求如果css文件较多,我们就要不停引入,在学了webpack...之后我们知道weback可以帮助我们打包各种资源,利用webpack打包即可解决我们的问题,但是webpack本身是不支持css,jpg等文件的,只所以能够打包各种资源是因为loader的介入 loader...这里就的借助url-loader进行处理,url-loader依赖于file-loader cnpm i url-loader file-loader -D 配置loader . . ....limit=7631' } 这样打包后没有被base64的图片,文件名会变成(hash)值,这是为了防止图片重名 如果我们希望其显示原来的文件名时,需传入如下配置 {...,前者覆盖后者,因此当我们需要展示原来的图片名称,又不想遇到图片重名时被替换,我们应该在图片名称前面加几位hash值 { test:/\.

    81720

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券