使用插件ExtractTextPlugin取消最小化pug
ExtractTextPlugin是一个Webpack插件，用于将CSS从打包的JavaScript文件中提取出来，以单独的CSS文件形式引入页面。然而，最新版本的Webpack已经不再推荐使用ExtractTextPlugin，而是使用mini-css-extract-plugin来代替。
取消最小化pug的过程中，可以按照以下步骤进行操作：
- 首先，安装mini-css-extract-plugin插件：
npm install --save-dev mini-css-extract-plugin- 在Webpack配置文件中引入插件：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');- 在Webpack配置文件的plugins部分，添加以下代码：
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],- 在Webpack配置文件的module部分，修改对应的rules规则，将原来使用ExtractTextPlugin的部分替换为使用MiniCssExtractPlugin：
module: {
rules: [
{
test: /\.pug$/,
use: [
'html-loader',
'pug-html-loader'
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
}- 重新运行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
相关·内容
当我用ExtractTextPlugin解压一个.pug文件时，它会把它转换成超文本标记语言，但会缩小，因为它不缩小？？
const extractHTML = new ExtractTextPlugin('[name]-pug.html');
....
{
test: /\.pug$/,
use: extractHTML.extract({
fallback: "style-loader",
use: ['html-loader' ,'pug-html-loader'],
浏览 20提问于2017-08-29得票数 0
我完全是Webpack (2)的新手，所以请原谅我到目前为止的简单理解。
在网上的几个教程之后，我拼凑了一个工作的package.json和webpack.babel.config.js文件。
本质上，我试图将SCSS转换为CSS，Pug转换为HTML，将JS转换为Babel'd JS。
当我运行我的dist命令时，它会生成文件，但同时也会生成.js文件，用于每个.scss和.html等。希望下面的图像能够说明这一点：
理想情况下，我想要的只是简单的app.css、index.html和app.js。
webpack.babel.config.js
import webpac
浏览 0提问于2017-03-17得票数 6
回答已采纳
1回答
这是文件夹结构，我需要，因为这个repo将用于一个网站托管在netlify的来源。要使netlify站点正常工作，index.html必须位于存储库的根文件夹中。我在配置webpack时遇到了问题。我已经让图像按照它应该的样子工作了。pug和scss以及可能的js文件需要如下文件夹结构所示。我已经阅读了pug-html-loader的文档，但没有任何与此相关的文档。
Project-name
|--dist
| |--Images
| | |--Img.png
| |--Pages
| | |--Buttons.html
| | |--Cards.html
| |--Styl
浏览 0提问于2018-03-11得票数 0
我有问题最小化css文件输出的提取-文本-webpack-插件
/* webpack.config.js */
...
loader: [{test: /\.css$/, loader: ExtractTextPlugin.extract('css?minimize')}]
...
plugins: [new ExtractTextPlugin("styles.css")]
...
/* test.js */
require('./file1.css')
/* file1.css */
@import './file2.css'
浏览 3提问于2015-12-06得票数 31
回答已采纳
(function (exports, require, module, __filename, __dirname) { import path from 'path'
^^^^^^
SyntaxError: Unexpected token import
当我使用webpack-dev-server --hot时会发生此错误。
这似乎是因为它看不懂import或者webpack不支持import。我试着使用babel-register，但它不起作用。有
浏览 5提问于2017-04-02得票数 6
回答已采纳
我正在学习CSS课程，已经厌倦了手工输入类似的HTML结构，所以我连接了pug模板和webpack-dev服务器来服务它。
注意：我的入口点是.scss文件，而不是.js
我有两个问题：
( a)只有来自css的资产被加载到构建文件夹中，但是.pug模板中的.pug属性中引用的图像和svg被忽略了。
( b)浏览器重新加载在webpack-dev-server中不起作用
我的webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plu
浏览 1提问于2019-04-26得票数 1
我的目录结构如下。
/public
(git-ignored files)
/src
index.js
/views
index.pug
server.js
webpack.config.js
index.pug
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/public/style.css" rel="stylesheet" />
script.
浏览 1提问于2017-05-29得票数 3
示例Vue代码(在开发中工作)：
<template lang="pug">
.wrapper
</template>
<style lang="stylus" scoped>
.wrapper
min-height: 100vh
display: flex
justify-content: center
align-items: center
flex-wrap: wrap
text-align: center
</style>
在开发中，这与预期完全相同
浏览 1提问于2016-11-18得票数 1
回答已采纳
我做了一些Node.js的工作，但现在一些“客户”要求我制作一个静态页面，就像托管在GitHub页面上一样，并有一些静态导航，但我想用pug，sass和js来构建它。我已经尝试了一些webpack的配置，但是版本4似乎在一些插件上有问题。任何想法，项目，生成器或任何东西都将受到感谢。
谢谢。亚历克斯
例如，我想出了这个webpack的配置，如果有人能让它变得更好，那就太好了。
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin'
浏览 0提问于2018-03-19得票数 0
2回答
Webpack如何创建多个页面？
、、、、
这似乎是一个业余的问题，但我在与Webpack一起创建其他页面时遇到了困难。
这是我的webpack.config.js文件
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack = require(&
浏览 4提问于2017-06-15得票数 3
我坚持使用webpack构建node js项目，而我使用的是pug引擎作为前端。
我的项目结构：
bin
controller
- csv.controller.js
public
- stylesheets
- javascript
- images
routes
- csv.route.js
- index.route.js
views
- layouts
-- layout.pug
-index.pug
app.js
Package.json文件
{
"name": "csv",
"version&#
浏览 13提问于2019-09-25得票数 1
我使用的是打字稿和速成稿。在我想要在vue.js中使用单个文件组件之前，一切都正常工作。这是我的部件，
<template>
<div>This is a simple component. {{msg}}</div>
</template>
<script lang='ts'>
export default {
data() {
return {
msg: "you"
}
}
}
</script>
我的webpack档案，
cons
浏览 4提问于2017-11-19得票数 4
1回答
我已经在表单验证方面工作了几天。我正在尝试验证一个多步骤表单。 我正在使用Nodejs，ES6，Express，PUG。我很难找到有用的东西。我想欧芹菜可以为我做这件事，但是我不能让它在NodeJS上工作。 对于我的.js文件中的代码(其中risk-calc是我表单的id )： $('.form-navigation .next').click(function() {
if ($('#risk-calc').parsley().validate({group: 'block-' + curIndex()}))
navigateTo
浏览 24提问于2019-05-17得票数 0
回答已采纳
我使用webpack 3作为我的构建过程。
webpack.config.js：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader
浏览 0提问于2018-03-17得票数 0
回答已采纳
1回答
我使用Webpack 2作为我的投资组合网站，但它不是一个SPA -因此，意图不是输出到我的捆绑JS所有的东西。
我有一些.pug、.scss和.js文件的入口点。就像这样：
entry: {
app: [
path.resolve(__dirname, 'src/pug/app.pug'),
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: pa
浏览 0提问于2017-04-15得票数 0
回答已采纳
我是webpack的新手，正在努力学习它。我一直试图使用webpack将我的供应商js文件和自定义jquery脚本从src复制到dist。我试过了，但找不到任何方法。
所以我的文件夹结构是这样的：
Project_root_folder
- node\_modules/
- package.json
- src/
- app/
- app.js
- img/
- img1.png
- css/
- main.scss
- js/
- custom\_slick.js
- main.js
- plugins/
浏览 2提问于2017-09-17得票数 3
回答已采纳
2回答
我条目JS文件中唯一的内容是：
import $ from 'jquery';
jQuery JS文件的大小为来自的29.5kb。我的条目(只包括jQuery，而没有其他内容)的大小为86 of 。
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin
浏览 0提问于2018-04-22得票数 2
回答已采纳
我用font- and webpack加载font-and，我的webpack.config.js是
'use strict';
const webpack = require('webpack');
const siteRoot = '_site';
// for browserSync
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
// for clean folders before building
const CleanWebpac
浏览 0提问于2016-07-16得票数 2
下面是设置：
package.json
{
"dependencies": {
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.24.1",
"node-sass": "^3.13.0",
"sass-loader": "^4.0.2",
浏览 4提问于2016-11-21得票数 0
回答已采纳
随着Jade向Pug的过渡，目前还没有Pug插件。问题是我们的.jade文件扩展名变成了.pug，这是IDE无法识别的。
我们如何在Intellij (或其他Intellij )中使用pug？
浏览 15提问于2016-04-11得票数 2
回答已采纳
具有计算CSS类名的Pug mixin
我的pug tweet通常只生成以下HTML：
<div class='col-md-3'></div>
我传递给tweet参数index，它是一个基于零的正数.当index等于tweetData.index (在其他地方定义)时，我希望生成的div发光，如下所示：
<div class='blueGlow col-md-3'></div>
这是我的尝试：
mixin tweet(index)
div.collapse(class= tweetData.index =
浏览 3提问于2018-01-04得票数 6
回答已采纳
我对webpack和pug如何协同工作有了基本的了解，使用HtmlWebpackPlugin通过pug模板生成带有捆绑资源的页面。 我已经用两个pug文件创建了一个非常简单的测试项目：head.pug包含<head>中包含的内容，index.pug是其余的。我在index.pug中创建了一些变量，我希望通过使用include head.pug在head.pug中使用它们。下面是它们的外观： // head.pug //
title #{title}
if isProduction
base(href='myurl.com/welcome/')
// i
浏览 42提问于2021-01-08得票数 1
回答已采纳
1回答
狼吞虎咽配置帕格
、、、
在每次编译错误后，我如何修改吞咽状态下的pug配置以排除关闭监视模式？
gulp.task('pug', function(){
return gulp.src('app/pug/**/*.pug')
.pipe(pug({pretty: true}))
.pipe(gulp.dest('app'))
});
浏览 2提问于2016-10-20得票数 0
回答已采纳
我正在尝试弄清楚如何在我最终输出的css文件上运行postcss。
'strict';
const path = require('path');
const webpack = require('webpack');
const StatsPlugin = require('stats-webpack-plugin');
/* POSTCSS Optimizations of CSS files */
const clean = require('postcss-clean');
const colorMin
浏览 0提问于2016-03-21得票数 11
1回答
我正在尝试将选项传递给css加载器，并使用新的Webpack 2配置：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
loader: 'css-loader',
options: {
minimize: {
discardComments: {
removeAll: true,
}
},
},
}),
},
但这些选项都不起作用。我做错了什么？
浏览 7提问于2017-03-03得票数 0
我正在尝试在Intellij IDEA中添加对Pug的支持。
文件->设置->编辑器->代码样式->文件类型。
但在已识别的文件类型列表下没有Jade或Pug。如何修复它？
浏览 10提问于2019-12-10得票数 0
我的Webpack配置是：
{ devtool: 'source-map',
output:
{ path: '/Users/apple/Desktop/WorkSpace/GitHub/Webpack-Boilerplate/dist',
filename: '[name].bundle.js.[hash:8]',
sourceMapFilename: '[name].bundle.map',
publicPath: '/' },
plugins:
[ O
浏览 0提问于2016-06-20得票数 2
1回答
我的项目环境是
webpack 1.15.0
extract-text-webpack-plugin 1.0.1
我将样式提取到单个css文件中，它在chrome firefox和IE10+中运行良好，但在IE9-中则不然。
我发现旧IE对css文件有限制：
A sheet may contain up to 4095 rules(maybe selectors)
A sheet may @import up to 31 sheets
@import nesting supports up to 4 levels deep
但是我提取的css文件有4095+选择器。
那么，是否有一种方法可以自
浏览 1提问于2017-11-24得票数 0
回答已采纳
除了使用函数 gulp.watch()的之外，所有任务都执行得很好。我真的不知道该怎么办。在互联网上，与NodeJS v6发出的相同错误。但我有最新的四个主要版本。有一份文件
// gulp declarations
var gulp = require('gulp'),
pug = require('gulp-pug'),
copy = require('gulp-copy'),
concat = require('gulp-concat'),
sass = require('gulp-s
浏览 0提问于2016-08-06得票数 0
我编写了一个将Pug作为HTML字符串导入的Rollup插件：
// Rollup plugin imported to Vite config
import { render } from 'pug';
export default function pug() {
return {
name: 'rollup-plugin-pug-html',
transform(src, id) {
if (id.endsWith('.pug')) {
const html = render(src,
浏览 7提问于2021-08-31得票数 1
回答已采纳
1回答
我有一个理解es6的index.js文件。如果我在同一文件夹中创建另一个文件js文件并创建一些es6，我会得到一些错误。这似乎是我的index.js是唯一一个得到我的巴别塔加载程序的效果。这是我的webpack.config.js，我不能从不同的js文件导入导出，但我不确定出了什么问题
Webpack配置：
'use strict';
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPl
浏览 5提问于2018-08-09得票数 1
1回答
我正在实现Webpack，以捆绑我所有的项目资产。它运行得很好，但是因为我有链接的文件，比如从我的.scss文件引用的图像，所以我需要启用源地图，以便resolve-css-loader对文件进行排序并正确放置它们。源码映射的生成大大降低了包的编译速度。有没有人知道我怎么才能加快速度呢？
我的webpack.config.js文件：
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webp
浏览 0提问于2017-10-22得票数 0
1回答
我的source目录中有以下结构：
|-source
|-home.pug
|-page1.pug
|-page2.pug
我希望在我的dest目录中得到这样的信息：
|-dest
|-index.html (former home.pug)
|-page1/index.html (former page1.pug)
|-page2/index.html (former page2.pug)
我的Gulpfile.js看起来是这样的：
var
gulp = require('gulp'),
gulpif = require('gulp-i
浏览 0提问于2016-12-22得票数 1
回答已采纳
2回答
我真的很沮丧，因为我找不到关于这个主题的任何有用的资源。
我只想查看我的.css文件，使用post css的插件来转换它们，最后将它们导出到我的/public文件夹，就像我已经对我的.jsx文件所做的那样
这是我的web包配置
const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
ent
浏览 1提问于2017-03-24得票数 3
我的src/目录如下：
src/
---about/
------history.pug
------mission.pug
---contact/
------email.pug
---index.pug
我希望我的.pug文件的编译方式能够维护这个目录层次结构，甚至在dist/目录中也是如此。类似于：
dist/
---about/
------history.html
------mission.html
---contact/
------email.html
---index.html
我在用Gulp来处理帕格文件。这是否可以通过使用gulp或其他方式来完成？谢谢!
处理我的pug文
浏览 1提问于2017-11-10得票数 3
回答已采纳
1回答
到点
有什么方法可以让Pug在Markdown文件中包含嵌入式HTML，作为实际HTML的一部分而不是简单的纯文本？
详细信息
我有一个使用jstransformer-markdown-it过滤器的Pug模板。文件嵌入了HTML。这个Markdown文件看起来像这样(video.md)
# Watch this video!
This video demonstrates *the power of something something*.
<iframe width="560" height="315" src="https://www.y
浏览 1提问于2016-10-30得票数 3
回答已采纳
在Webpack中，我有以下插件：
plugins: [
new ExtractTextPlugin('styles.css'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
drop_console: true,
}),
]
我只想将UglifyJsPlugin 应用于特定的目标，因此我尝试使用预期的条件：
plugins:
浏览 10提问于2016-03-24得票数 37
回答已采纳
1回答
最近，由于webpack清单文件中包含.includes，而IE11无法运行，我们的构建已经停止了对IE11的工作。
我对此进行了深入研究，发现react-datepicker在它的代码中使用了.includes()，但是在我们的main.app.js文件中，它会转换它，所以这里没有任何东西，只有在清单文件中。
如果我从webpack中删除清单文件，错误将转移到main.app.js文件中，该文件名为object doesn't support property or method includes。此错误来自来自camelCase.js的redux-actions。我觉得这是红鲱鱼，
浏览 0提问于2018-11-05得票数 1
回答已采纳
我是webpack的新手，在我的项目中使用webpack 4。但我有个问题，我有一些文件脚本。第一次用webpack开发服务器构建，运行正常。但是，当服务器运行时，我继续创建一个新的文件脚本(例如: c.js)，重命名或删除exist文件--服务器不自动将此脚本构建为main.js。自动webpack如何在没有再次运行命令的情况下将我的新文件(c.js)重建为main.js？
这是我在github: 上的回购
您可以按照这个步骤来重现我的问题：
步骤1:使用'npm运行dev‘启动服务器，并在浏览器中运行localhost:3000。
步骤2:当服务器运行时，我们创建新文件(c.js)
浏览 0提问于2018-05-20得票数 3
回答已采纳
1回答
我正在尝试做的事情(使用gulp pug，使用pugjs)：
<?='test!'?>
input(type='hidden', name="!{'<?=CMS::cmsQueryParam?>'}", value='loginForm')
以及我能在pug插值页面上找到的任何东西，但它总是给我这样的东西：
test!
<input type="hidden" name="!{'<?=CMS::cmsQueryParam?>&
浏览 4提问于2018-04-02得票数 0
我使用vue单文件组件，并将标记和逻辑分别分离到.pug和.ts文件。如果您对我不统一的原因感兴趣，请参阅comments部分。
问题
import template from "@UI_Framework/Components/Controls/InputFields/InputField.vue.pug";
import { Component, Vue } from "vue-property-decorator";
console.log(template);
@Component({
template,
components: {
浏览 1提问于2020-07-30得票数 6
回答已采纳
尝试使用Vue和TypeScript构建单个文件组件。我经常遇到一个错误。 [Vue warn]: Property or method "foo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property FooBar.vue <template la
浏览 30提问于2019-10-08得票数 1
回答已采纳
1回答
我的网络产品webpack配置看起来像：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const WebpackStrip = require('strip-loader');
module.exports = [
{
devtool: 'chea
浏览 2提问于2017-11-16得票数 0
回答已采纳
现在我用的是
gulp.task('html', function(){
return gulp.src(['src/**/*.pug', ...ignorePug])
.pipe(pug())
.pipe(gulp.dest('build'))
});
如何构建HTML，使文件名成为文件夹名。
示例：
src/index.pug -> build/index.html
src/team.pug -> build/team/index.html
src/somepage.pug -> bu
浏览 0提问于2019-05-09得票数 1
回答已采纳
我需要从两个不同的scss条目文件生成两个css文件。在下面的代码中，我提到了两个条目points.first，一个包含所有自定义scss文件导入，另一个包含所有自定义引导导入。
因此，我的要求是生成两个独立的css文件like...app.css和bootstrap.css。
entry: ["./styles/app.scss", './styles/custom-bootstrap.scss'],
rules: {
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract(['css-lo
浏览 2提问于2017-09-16得票数 1
回答已采纳
1回答
我理解Vue使用pug进行扩展；详细信息在这里：https://vuejsdevelopers.com/2017/06/11/vue-js-extending-components/ 但在Nuxt中，我找不到将pug模板extend或include到子模板中的方法。如何做到这一点呢？ 例如，这不起作用，因为我们在Nuxt中没有SurveyInputBase.pug文件，它是一个组件； <template lang="pug">
include SurveyInputBase.pug
</template>
<script>
expo
浏览 30提问于2019-06-26得票数 1
2回答
我正在尝试阅读上的PUG JS文档
但是要使用它，我必须在每次保存.pug文件时运行该命令，以便呈现它
我想要像sass那样的东西：
sass --watch style.sass
我能用Pug -jade做到这一点吗？
浏览 14提问于2017-03-12得票数 0
我试图设置webpack有一个编译通行证，它扫描一个文件树中的所有css文件，然后生成一个css文件与所有样式捆绑，自动修复和最小化。
我不能让自动修复插件工作。
下面是webpack相关的配置部分：
const webpack = require('webpack')
const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// post
浏览 1提问于2016-08-18得票数 5
回答已采纳
1回答
插件gulp-pug允许通过data属性将全局变量传递给pug文件。如果我们不需要在每个.pug文件中包含完整的数据集，该怎么办？要实现条件数据注入，我们需要访问pipe(this.gulpPlugins.pug({})中的当前vinyl文件实例，或者至少知道源文件的绝对路径。有可能吗？ const dataSetForTopPage = {
foo: "alpha",
bar: "bravo"
};
const dataSetForAboutPage = {
baz: "charlie",
hoge:
浏览 10提问于2020-04-20得票数 2
回答已采纳
1回答
我的webpack启动的时候速度很慢，有变化的时候-编译。实际上现在的开发速度非常慢。我只使用greensock作为供应商，而不使用其他东西。我也只用了几张图片..不确定。
代码如下：
const path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugi
浏览 3提问于2018-06-22得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
