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

使用插件ExtractTextPlugin取消最小化pug

ExtractTextPlugin是一个Webpack插件,用于将CSS从打包的JavaScript文件中提取出来,以单独的CSS文件形式引入页面。然而,最新版本的Webpack已经不再推荐使用ExtractTextPlugin,而是使用mini-css-extract-plugin来代替。

取消最小化pug的过程中,可以按照以下步骤进行操作:

  1. 首先,安装mini-css-extract-plugin插件:
代码语言:txt
复制
npm install --save-dev mini-css-extract-plugin
  1. 在Webpack配置文件中引入插件:
代码语言:txt
复制
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  1. 在Webpack配置文件的plugins部分,添加以下代码:
代码语言:txt
复制
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
  }),
],
  1. 在Webpack配置文件的module部分,修改对应的rules规则,将原来使用ExtractTextPlugin的部分替换为使用MiniCssExtractPlugin:
代码语言:txt
复制
module: {
  rules: [
    {
      test: /\.pug$/,
      use: [
        'html-loader',
        'pug-html-loader'
      ]
    },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    }
  ]
}
  1. 重新运行Webpack构建命令,即可取消最小化pug并将CSS提取为单独的文件。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mpns
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 元宇宙(Metaverse):https://cloud.tencent.com/product/metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • VBA专题10-5:使用VBA操控Excel界面之隐藏取消隐藏及最小化功能区

    隐藏和取消隐藏功能区 当隐藏功能区时,功能区选项卡和选项卡中的控件全被隐藏。...不使用VBA代码,要切换到显示该选项卡中的控件,只需双击当前选择的选项卡的名称或者按Ctrl+F1键。 没有单独的VBA命令来最小化功能区。...要确保仅在功能区最初没有最小化时执行该语句,首先要检查功能区的高度,当没有最小化时功能区高度值大于100,或者可以使用GetPressedMso方法来检查功能区的状态。...因此,下面的代码在最小化前使功能区取消隐藏(如果其最初是隐藏的): '最小化功能区 '如果被隐藏则取消隐藏功能区 With Application If Not.CommandBars("Ribbon...("Ribbon").Height < 25 Then MsgBox "当其自动隐藏时不能最小化功能区" Else '如果隐藏则取消隐藏功能区 If

    3.5K30

    webpack学习(六)打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令webpack...-p即表示调用UglifyJS来压缩代码,还有不少webpack插件如html-webpack-plugin也会默认使用UglifyJS。...UglifyJS可用的选项有: parse       解释 compress    压缩 mangle      混淆 beautify    美化 minify      最小化  //在插件HtmlWebpackPlugin...,指在命令行中直接输入 STDOUT      标准输出 STDERR      标准错误输出 side effects函数副作用,即函数除了返回外还产生别的作用,比如改了全局变量 列一份配置: //使用插件...html-webpack-plugin打包合并html //使用插件extract-text-webpack-plugin打包独立的css //使用UglifyJsPlugin压缩代码 var HtmlWebpackPlugin

    4.8K60

    vscode html注释快捷键_VSCode 的快捷键及常用插件总结

    1、注释: · 单行注释:ctrl+/, 注释后再按取消 · 取消单行注释:alt+shift+A 注释后再按取消 2、移动行 · 向上移动一行:alt+up · 向下移动一行:alt+down 3、显示...10、行增加缩进 · ctrl + [ 11、行减少缩进 · ctrl + ] 12、关闭编辑窗口 · ctrl + w 13、关闭所有窗口 · ctrl + k + w VS Code 的常用插件...javascript 语法错误与提示 8、File Navigator 快速查找文件 9、Git History (git log) 查看 git log 10、Gulp Snippets 写 gulp 使用到...HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式 12、HTML Snippets 超级好用且初级的H5代码片段以及提示 13、Debug for Chrome 使用...(Jade) snippets pug 语法提示 24、React Components 根据文件名创建反应组件代码。

    1.8K30

    Webpack Loader

    /my-img.png' Plugins Loader不够用/不好用或者做不到的时候,通过自定义插件来扩展 例如extract-text-webpack-plugin用来改变样式规则被打进bundle的...style-loader默认行为,把CSS收集起来,通过标签作为外部资源引用: var ExtractTextPlugin = require('extract-text-webpack-plugin...');plugins: [ new ExtractTextPlugin('main.css') ] html-webpack-plugin用来生成入口HTML: var HTMLWebpackPlugin...awesome-typescript-loader:加载TypeScript 2.0+代码 coffee-loader:加载CoffeeScript代码 模板 html-loader:把require引用的HTML静态资源作为字符串导出 pug-loader...:加载Pug模板,返回个函数 jade-loader:加载Jade模板,返回个函数 markdown-loader:把Markdown编译成HTML react-markdown-loader:用markdown-parse

    1.1K30

    Vue笔记:VS Code 常用快捷键

    VS Code 常用快捷键 1、注释: 单行注释:ctrl+/, 注释后再按取消 取消单行注释:alt+shift+A 注释后再按取消 2、移动行 向上移动一行:alt+up 向下移动一行:alt+down...shift + n 10、行增加缩进 ctrl + [ 11、行减少缩进 ctrl + ] 12、关闭编辑窗口  ctrl + w 13、关闭所有窗口  ctrl + k + w VS Code 的常用插件...HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式 12、HTML Snippets 超级好用且初级的H5代码片段以及提示 13、Debug for Chrome 使用...vs code 来打断点调试 14、Document this Js 的注释模板 15、jQuery Code Snippets jquery 提示工具 16、Html2jade html 模板转 pug...(Jade) snippets pug 语法提示 24、React Components 根据文件名创建反应组件代码。

    4.2K30

    假如用王者荣耀的方式学习webpack

    它是非常强大的,除了插件市场提供的成熟插件,还可以自己进行编写。plugin为loader带来了更多的特性,它存在的目的在于解决loader无法实现的其他事情。...使用插件只需要require()它,然后再添加到plugin模块中,通常情况下多数插件是可自定义的,所以想在一个配置文件中使用不同配置功能的插件,必须通过new创建一个新的实例。)...(通过配置resolve来解析文件路径,reslove中可以配置使用专属插件。)...模板(Templating) html-loader 导出 HTML 为字符串,需要引用静态资源 pug-loader 加载 Pug 模板并返回一个函数 jade-loader 加载 Jade 模板并返回一个函数...DllReferencePlugin(webpack自带):项目打包引用预打包生成的文件 AssetsWebpackPlugin:为打包生成的js等生成路径引用指引 HappyPack:运用多核加速打包 ExtractTextPlugin

    84820

    假如用王者荣耀的方式学习webpack

    它是非常强大的,除了插件市场提供的成熟插件,还可以自己进行编写。plugin为loader带来了更多的特性,它存在的目的在于解决loader无法实现的其他事情。...使用插件只需要require()它,然后再添加到plugin模块中,通常情况下多数插件是可自定义的,所以想在一个配置文件中使用不同配置功能的插件,必须通过new创建一个新的实例。)...(通过配置resolve来解析文件路径,reslove中可以配置使用专属插件。)...w=87&h=87&f=jpeg&s=5208] 模板(Templating) html-loader 导出 HTML 为字符串,需要引用静态资源 pug-loader 加载 Pug 模板并返回一个函数...DllReferencePlugin(webpack自带):项目打包引用预打包生成的文件 AssetsWebpackPlugin:为打包生成的js等生成路径引用指引 HappyPack:运用多核加速打包 ExtractTextPlugin

    62800

    Butterfly主题的PWA实现方案

    使用hexo-offline-popup:这个插件配置较为简单,安装以后添加几行配置项即可。适合初学者。...使用workbox:这个插件需要配合gulp插件,所以配置较为繁琐,好处是可以自定义适配弹窗提示,适合对前端有一定了解的用户。如果你还有使用pjax,恭喜你,BUG御三家马上就可以集齐了。 ?...安装必要插件 既然要使用gulp配合workbox实现PWA,自然少不了安装这两个插件。...butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}: 将之前生成的图标包移入相应的目录,例如我是/...安装全套压缩插件 将[Blogroot]/gulpfile.js里的内容修改为: 使用了gulp压缩js以后,使用了冰卡诺老师的gitcalendar和本站的右键环形菜单教程的用户,会发现gitcalendar

    1.6K20

    入门webpack(下)

    使用插件的方法 要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组)继续看例子,我们添加了一个实现版权声明的插件...bundled JavaScript file 知道Webpack中的插件如何使用了,下面给大家推荐几个常用的插件 HtmlWebpackPlugin 这个插件的作用是依据一个简单的模板,帮你生成最终的...安装 npm install --save-dev html-webpack-plugin 这个插件自动完成了我们之前手动做的一些事情,在正式使用之前需要对一直以来的项目结构做一些改变: 移除public...,还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载,虽然这个API不难使用,但是如果是React模块,使用我们已经熟悉的Babel可以更方便的实现功能热加载。...ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID UglifyJsPlugin:压缩JS代码; ExtractTextPlugin:分离CSS和JS文件 我们继续用例子来看看如何添加它们

    87660

    搭建webpack项目框架

    webpack的优点就不多说了,可扩展性,强大的npm插件库,说干就干。...({ //最小化入口 chunk name: ['runtime'], minChunks: Infinity }) 8、本地不需要压缩,测试和线上环境才去压缩,之前的环境划分就派上了很好的用场了,...screw_ie8: false, except: ['e'] }, sourceMap: false })  optimize-css-assets-webpack-plugin 能使 css 最小化...是这样的:我们在使用 npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,他们是:--save-dev 或 --save。...所以它们的区别在 package.json 文件里面体现出来的就是,使用 --save-dev 安装的 插件,被写入到 devDependencies 域里面去,而使用 --save 安装的插件,则是被写入到

    2.3K40
    领券