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

PostCSS: ExtractTextPlugin运行两次

PostCSS是一个用于转换CSS的工具,它可以通过插件系统来处理CSS,并且可以根据需要进行自定义配置。ExtractTextPlugin是一个用于将CSS提取为独立文件的插件。

当使用ExtractTextPlugin插件提取CSS时,有时会遇到运行两次的情况。这通常是由于webpack的工作原理所致。

在webpack中,当使用ExtractTextPlugin插件提取CSS时,它会在构建过程中创建一个临时的CSS文件,并将CSS内容写入该文件。然后,webpack会继续进行其他的构建任务。在完成所有构建任务后,ExtractTextPlugin会将临时的CSS文件移动到指定的输出目录,并在HTML中引用该文件。

由于webpack的构建过程是基于依赖关系的,当某个文件发生变化时,webpack会重新构建与该文件相关的所有内容。因此,当使用ExtractTextPlugin插件提取CSS时,如果有其他文件发生了变化,webpack会重新运行构建过程,包括重新执行ExtractTextPlugin插件。这就导致了ExtractTextPlugin运行两次的情况。

为了解决这个问题,可以使用webpack的缓存机制来避免重复运行ExtractTextPlugin插件。可以通过在webpack配置中设置cache: true来启用缓存机制,这样在重新构建时,webpack会尝试复用之前的构建结果,从而避免重复运行ExtractTextPlugin插件。

总结起来,PostCSS是一个用于转换CSS的工具,ExtractTextPlugin是一个用于将CSS提取为独立文件的插件。当使用ExtractTextPlugin插件提取CSS时,有时会遇到运行两次的情况,这是由于webpack的工作原理所致。可以通过启用webpack的缓存机制来避免重复运行ExtractTextPlugin插件。

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

相关·内容

  • WebPack 模块化打包工具(下)

    /Greeter'; render(, document.getElementById('root')); 运行npm satart命令进行编译打包,再运行npm run server...,首先安装postcss-loader和autoprefixer(自动添加前缀的插件) npm i postcss-loader autoprefixer -D 同样的,也是在 webpack 配置文件中添加...postcss-loader,在根目录新建postcss.config.js文件,添加如下代码之后,重新使用npm start打包时,我们写的 CSS 就会自动根据 Can i use 里的数据添加不同前缀了...,一次处理一个,Plugins 并不直接操作单个文件,它直接对整个构建过程其作用 继续运行上面的例子,我们给项目添加几个常用的插件,HtmlWebpackPlugin这个插件的作用是依据一个简单的index.html...const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin

    1.3K50
    领券