首页
学习
活动
专区
工具
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
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券