使用带有copy- Webpack -plugin的webpack导入静态文件
Webpack是一个现代化的静态模块打包工具，它可以将多个模块打包成一个或多个静态资源文件。在前端开发中，使用Webpack可以帮助我们管理和优化项目中的静态资源。
copy-webpack-plugin是Webpack的一个插件，它可以将指定的文件或文件夹复制到输出目录中。这在项目中需要复制一些静态文件（如图片、字体等）到打包后的目录中时非常有用。
使用copy-webpack-plugin的步骤如下：
- 首先，安装copy-webpack-plugin插件。可以通过npm或者yarn进行安装：npm install copy-webpack-plugin --save-dev
- 在Webpack的配置文件中引入copy-webpack-plugin插件：const CopyWebpackPlugin = require('copy-webpack-plugin');
- 在Webpack的配置文件的plugins配置中，实例化CopyWebpackPlugin并进行相关配置：plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'src/static', to: 'static' }, // 将src/static目录下的文件复制到输出目录的static文件夹中 // 可以配置多个复制规则 ], }), ],
在上述配置中，我们通过patterns选项指定了需要复制的文件或文件夹的来源和目标路径。其中，from表示源文件或文件夹的路径，to表示目标路径。可以根据实际需求配置多个复制规则。
copy-webpack-plugin的优势：
- 简化了静态资源的复制过程，提高了开发效率。
- 可以根据需要配置多个复制规则，灵活性高。
- 可以将复制的文件或文件夹进行重命名、过滤等操作。
copy-webpack-plugin的应用场景：
- 复制静态资源文件到输出目录，如图片、字体等。
- 复制第三方库的文件到输出目录，如引入的外部CSS文件、JS文件等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos 腾讯云对象存储（COS）是一种存储海量文件的分布式存储服务，可以用于存储和管理静态资源文件。
以上是关于使用带有copy-webpack-plugin的Webpack导入静态文件的完善且全面的答案。
相关·内容
问题陈述
我在遗留的React应用程序中有一个需求，该应用程序在特定目录中有多个scss文件。CSS不是在组件级别导入的，应用程序使用gulp作为构建系统监视文件更改，释放相应的CSS文件，合并它们，最后向index.html文件中注入链接标签(此步骤不必处于监视模式)，页面将重新加载。
什么是需要的
我们需要将此从吞咽配置转移到使用Webpack进行上述步骤。
到目前为止我已经尝试了什么-什么在起作用，
我最初的想法是(因为我们使用的是react脚本和react app重新连接)。
使用节点- sass -chokidar将sass文件编译成CSS并将它们写入特定的目录。
完成此步骤
浏览 4提问于2020-10-06得票数 1
回答已采纳
我的目标是在我的webpack.prod.js中树抖动webpack.prod.js(以及其他的)。这是我的配置文件。为了完整起见，我还将包括webpack.dev.js、webpack.common.js、tsconfig.json和package.json
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-w
浏览 1提问于2018-02-28得票数 4
回答已采纳
我想在我的webpack/打字稿项目中使用“虚拟选择插件”库。它没有类型定义。图书馆是通过国家预防机制安装的。在浏览器中，我得到了错误：
TypeError: virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13___default(...).init is not a function
打字稿和webpack没有抱怨。
Webpack产生了所需的思想，就像它适用于引导、闪烁和其他运行良好的东西一样：
...
/* harmony import */ var flickity__WEBPACK_IMPORTED_MODULE_2__ = __we
浏览 20提问于2022-01-16得票数 0
回答已采纳
我有下面的webpack.config。我尝试在我的style.css中使用相对url来指向一些svg文件。问题是相对url引用的是svg文件的一个副本，这只是一个export语句。有人知道为什么我的webpack.config要创建这些复制的svg文件吗？这些文件无法显示图像，但原始svg可以显示图像，所以我只是尝试让webpack停止创建复制的导出文件，而只是引用实际的svg。谢谢。 webpack.config.cs： const path = require('path');
const webpack = require('webpack');
c
浏览 32提问于2021-08-23得票数 0
回答已采纳
1回答
在官方文档中，当应用Code Splitting和生成chunk文件时，如果chunk代码发生变化，那么文件名就会改变。但是，使用[name].js代码文件的index.html不能更改其<script>标记中的文件名，因此在本例中，webpack-manifest-plugin生成的manifest.json将有助于将index.html映射到
但与文档的说法相反，每次我运行webpack来构建代码时，都会生成带有新哈希值的新代码(以防代码发生变化)，HTML-Webpack-Plugin将自动向<script>标记注入代码的新名称。这似乎没有必要使用webpack-
浏览 1提问于2019-08-26得票数 23
回答已采纳
1回答
我正在尝试设置我的第一个ES6和webpack“应用程序”，并希望使用类和模块。但是，每次我想通过webpack命令传输应用程序时，我都会得到以下错误：
$ webpack
Hash: c91db5651ec9123b8959
Version: webpack 3.5.6
Time: 2319ms
Asset Size Chunks Chunk Names
app.bundle.js 354 kB 0 [emitted] [big] main
index.html 978 bytes
浏览 4提问于2017-09-11得票数 0
回答已采纳
我有一个带有一些翻译的YAML文件。我需要将这些文件转换为JSON文件。我尝试过使用yaml-import-loader和json-loader，但是我得到了一个错误。
下面是我的设置：
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractEnglish = new ExtractTextPlugin('lang/en.js');
module.exports = {
entry: [
'./src/locales/applicati
浏览 18提问于2017-08-02得票数 4
1回答
我有webpack在我的普通HTML，CSS，和Javascript应用程序。我用webpack把scss转换成CSS。我希望我的javascript在我的dist文件夹中保持不变，因为我想在以后编辑wordpress项目。Webpack正在添加大量代码，这使得JS文件以后很难编辑。这是我的config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require(
浏览 11提问于2022-02-05得票数 0
我有一个模板文件，我用它来生成最终的输出html文件，使用html-webpack-plugin。有没有办法在生成最终文件时包含引用的本地文件？ 我有以下文件结构： .\public\index.html
.\public\css\site.css 下面是一个index.html模板文件： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title><%= htmlWebpackPlugin.options.title %>&
浏览 19提问于2019-04-22得票数 2
我试图在Rails项目中使用，它提出了如何使用Webpacker正确导入库的问题。
我添加了jQuery，但不知何故我不能添加蜜蜂插件。我希望能够导入我所需要的，并且只在我需要它的文件中导入
到目前为止我所做的是
安装带有纱线yarn add @mailupinc/bee-plugin的库
创建了一个新文件来添加我的代码并在application.js import ./bee中导入它。
在新文件中导入我的库。我试过
import "@mailupinc/bee-plugin"
import Bee from "@mailupinc/bee-plugi
浏览 7提问于2021-01-08得票数 0
回答已采纳
2回答
我对这一切都是新手，所以如果我的问题看起来很愚蠢，我提前道歉。我有问题，包括我的CSS文件使用webpack。我的webpack.config.js文件如下所示
const HTMLWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inje
浏览 20提问于2018-02-07得票数 2
回答已采纳
1回答
基本上，我想要创建一个动态插件系统。我需要能够部署新插件，而不必重新部署主插件系统。
基本上，如果我要使用SystemJS，我可以做一些类似的事情
System.import(url).then(plugin => {
this.createComponent(plugin.default);
});
url是动态的东西--可以从db或config等读取它。
上面的方法可以工作--除非我用的是角CLI，它使用Webpack。使用CLI是一个简单的选择，整个项目-所以我被Webpack和CLI困住了。
由于角CLI做了很多抽象，所以我不能修改webpack配置(我可以，但是我必须手动维
浏览 3提问于2017-07-06得票数 2
回答已采纳
1回答
捆绑大型生产反应应用程序
、、、、
我决定从头开始构建一个react (所有的设置都是必需的)，以便更好地理解幕后发生的事情(例如，我们已经通过create-react-app安装了这些东西)，一切都很好，但是包的大小确实很大(至少我认为是这样)。
我把我的应用程序设置成这样：
这是我的心声：
webpack.common
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-we
浏览 1提问于2018-06-13得票数 0
1回答
我按照这个链接将图片添加到包中：
根文件夹中有以下文件结构：
index.html
index.js
图像文件夹(带有svg的)
这是我的webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require('path');
const isProduction = process.env.NODE_ENV === 'production';
const HtmlWebpackPlugin = require(
浏览 19提问于2021-12-07得票数 1
回答已采纳
在将webpack从v4升级到v5之后，我得到了这个错误，这使我很难调试。
Uncaught TypeError: Cannot read properties of undefined (reading 'default')
at Module.UserEntity (main.9e5d0727.js:3998)
at Module.<anonymous> (main.9e5d0727.js:5952)
at __webpack_require__ (runtime-main.9e5d0727.js:28)
at fn (runti
浏览 3提问于2021-11-18得票数 3
回答已采纳
1回答
先试一试webpack。
在我的根目录中，我有我的main.js入口点，并且还在检查.js和.scss文件
它会编译main.js文件。
Webpack似乎找不到任何其他的.scss或.js文件。我做错了什么。
完整配置如下：
var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('w
浏览 18提问于2017-03-02得票数 1
回答已采纳
1回答
我正试图按照本教程中的说明将我的角2应用程序升级为角5：
我的项目成功构建，但我继续在浏览器中获取以下错误：common.js:999未登录错误:区域设置"DE".的区域设置数据丢失。
我尝试了以下链接中所建议的解决方案，但没有成功：
下面是我在package.json中的依赖关系：
"dependencies": {
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/cor
浏览 1提问于2018-07-05得票数 0
我对Webpack来说是个新手，我似乎不能正确安装jQuery。我已经按照我在网上找到的许多说明进行了操作，但是无论我怎么尝试，每当我试图在我的页面中包含一些jQuery时，我仍然得到一个'$ is not defined‘错误。我的webpack配置文件如下(我有三个配置文件: dev、prod和common)。我已经从配置文件中删除了之前所有失败的jQuery尝试。为了确认，我已经安装了带有npm的jQuery，并且可以在我的package.json文件中看到它作为一个依赖项列出。 我还在构建中使用了bootstrap，它工作得很好。 如果有人能帮上忙，我将不胜感激。我已经用头撞
浏览 17提问于2020-08-29得票数 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
2回答
我花了相当长的时间试图自己解决这个问题，但我在这里，除了向社区寻求一些指导之外，没有更多的选择需要考虑。
我试图在原则上做一些非常简单的事情，用WebPack动态导入组件，使用ES6模块和babelrc。
我有以下应用程序架构：
-root
- root/.webpack.dev.js
- root/.webpack.prod.js
-root/..babelrc
-根/Package.json
-根/节点_模块/
-根/区/区
- root/src/
- root/src/index.js
-根/src/模块/
-根/src/模块/module1.js
-根/src/模块/module2.
浏览 0提问于2019-08-27得票数 0
我是工作在一个网站建设在反应。直到我实现了快递，它才能正常工作。在实现了express之后，我无法在浏览器中加载一些资源，特别是图像。图像路径是正确的，但图像没有显示在浏览器中。
webpack.config.js是：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-t
浏览 1提问于2017-07-21得票数 2
回答已采纳
webpack.config.dev.ts
import * as ProgressBarPlugin from 'progress-bar-webpack-plugin';
错误:找不到模块“进度栏-webpack-插件”的声明文件
如果我试图在声明文件中添加一个模块：
index.d.ts
declare module "progress-bar-webpack-plugin";
错误:增强中无效的模块名。模块‘进度-酒吧-webpack-插件’解决了一个非类型模块在'.../myproject/node_modules/progress-bar-
浏览 2提问于2020-10-29得票数 1
我为我的VueJS项目创建了webpack配置。我希望将样式从javascript代码中分离出来。我使用了迷你css-提取插件，但最后我只收到bundle.js文件。这个配置有什么问题，哪里有错误？有没有丢失的装载机。我的配置如下：
import path from 'path';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
浏览 1提问于2018-05-18得票数 9
回答已采纳
静态文件(如.svg、.png等)既不会加载，也不会抛出错误。
希望能看到它们装上子弹。
结构
|--src
| |--modules
| | |--example.ts
| |--renderer
| | |--assets
| | | |--example.svg
| | |--app.ts
| | |--app.vue
| | |--app.scss
| | |--index.ts
| |--resources
| | |--example.json
| |--index.html
|--package.json
|--webpack
| |-
浏览 0提问于2020-06-09得票数 0
我有两个更少的文件：
**styles/consts.less**
@gray: #202020;
**styles/main.less**
@import 'consts.less';
body { background-color: @gray; }
我试图使用Webpack编译、缩小和打包两个较少的文件：
const webpack = require('webpack');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var
浏览 1提问于2019-06-28得票数 0
回答已采纳
我正在使用webpack-merge将两个webpack.config文件合并在一起，但我一直收到错误消息"TypeError: merge is not a function when I run the command "webpack --config./config/webpack.config.prod.js“
还有没有人遇到过这个问题？
webpack.config.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAss
浏览 9提问于2020-07-11得票数 42
回答已采纳
我正在学习如何编写服务工作人员的代码，并在我的ReferenceError文件中坚持错误“app.js : document是未定义的”。我正在使用带有InjectManifest模式的workbox库。我认为webpack.config.js中的问题，因为当我在webpack.config.js中删除InjectManifest时，错误就消失了。
My webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlug
浏览 1提问于2021-08-01得票数 1
回答已采纳
npx webpack
TS2307: Cannot find module './App.vue' or its corresponding type declarations.
我在用webpack，vue和打字稿。
我有webpack的基本配置。它有一个类型记录文件作为入口点。输出是文件夹生成。我正在使用类型记录加载程序和vue加载程序。
构建工作正常，直到我从javascript更改为类型记录(也就是说，如果我将app.ts重命名为app.js，并从webpack移除类型记录加载程序，一切都正常)。
对于vue，我添加了tsconfig.json文件。这有助于减少错误。
浏览 0提问于2020-11-11得票数 5
我正在努力改进对我的应用程序的支持，它是通过ES6通过@babel/polyfill和browserslist支持编写的。我已经遵循了上的所有说明，但我想我遗漏了一些东西。
我的browserslist支持是通过package.json定义的。我正在通过检查Array.from (它在整个代码中使用)来验证安装是否有效。
知道为什么我不能看到编译代码中的多填充吗？我过去常常在入口点声明多边形填充，但是babel文档现在说这是不需要的。
如果useBuiltIns：‘.babelrc’是在.babelrc中指定的，那么在webpack.config.js条目数组或源中都不要包含@babel/p
浏览 0提问于2019-03-29得票数 6
我的任务是使其中一个移动应用程序的反应兼容歌剧迷你在极端模式。在测试过程中，我了解到在反应代码中没有任何东西在那里起作用，但是在文件之前包含这个main.js文件，它实际上是起作用的。
我试着把它包含给Webpack，所以代码实际上被转换了，而不是包含一个庞大的库，但没有成功。
package.json文件
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-class-properties": "^7.10.1",
浏览 0提问于2020-07-08得票数 0
我试图在webpack开发服务器的服务器中包含我的css。为了实现这一点，我显然必须同时使用样式加载器和css -加载程序，以便将css绑定到JavaScript中。
我不能让它起作用。
我遵循的指令，但是我得到了以下错误：
./src/index2.js中的错误
C:\Users\magnusga\Downloads\Programming\TestPrograms\test\src‘中的模块未找到：错误:无法解析“main.css”
@ ./src/index2.js 1:0-27
@ multi (webpack)-dev-server/client? ./src/index2.js
浏览 0提问于2018-04-12得票数 0
回答已采纳
1回答
我目前正在创建一个。它基本上是一个使用SCSS添加样式的React组件。当我测试它时，类名在那里，但是没有应用样式。
这是的回购。我使用分开的webpack配置来构建组件所在的特定文件夹。
下面是我使用的webpack配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const EsLintFormatter = require('eslin
浏览 2提问于2020-03-21得票数 3
回答已采纳
我正在尝试让一个css文件在我的react项目中工作。我一直在个人项目中使用create-react-app，但这个项目是从webpack创建的，所以我必须配置加载器之类的，我的理解是有限的。更糟糕的是，我继承了这个项目，所有样式都应用于每个组件上的样式对象，因此这里有多个复杂性。但不管怎样，css文件与组件的JS文件位于完全相同的文件夹中。我尝试将css样式表作为文件导入Home组件中，如下所示：
import from './home.css'
我得到的错误是...
Module build failed: SyntaxError: Unexpected token (10
浏览 4提问于2018-02-16得票数 1
我正在尝试从Gulp迁移到Webpack的一个小项目的客户端构建(主要是服务器端的一些较少的JS文件)。
我有以下几条道路：
“样式/重新安置”
“样式/混合体.”
“样式/样式较少”
“脚本/scripts.js”
我只需要：
1-将较少的文件编译成一个"app.css“文件，并将其缩小为"app.min.css”。
2-将"scripts.js“文件缩小为"app.min.js”。
我有以下package.json文件：
{
"devDependencies": {
"webpack": &
浏览 0提问于2018-10-18得票数 1
回答已采纳
我试图在我们的项目上运行npm构建，即"webpack -mode=production ./config/webpack.config.prod.js“。
我在我的tsx文件中添加了引导文件，如下所示。
import bs from "../../../../../../node_modules/bootstrap/scss/bootstrap.scss";
但我正在讨论以下的问题。
CssSyntaxError: Missed semicolon
at Input.error (/Users/m.g2/Desktop/WebPanel/WebpanelClient/
浏览 4提问于2021-05-21得票数 1
我的webpack.config.js文件
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = re
浏览 7提问于2021-04-20得票数 5
回答已采纳
我有点卡住了
我有一个脚本，以编程方式注入清单，供应商和应用程序到页面加载。我需要在构建过程中将这个脚本注入到html中，但是在开发过程中没有必要。
下面是我的prod配置(默认的，有一些非常小的更改)-
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge
浏览 0提问于2018-03-06得票数 2
回答已采纳
3回答
我正在使用React，Redux和Webpack构建一个小应用程序。当我切换到Webpack v.4时，我开始收到有关包大小的警告。我读过关于如何让它变小的文章。我还安装了捆绑包分析器，发现我在node-modules中有很大的寄存器。像往常一样，我只使用一个或两个方法，对每个我更改了所有导入内容的文件使用lodash
import _ from 'loadash'
至
import get from 'lodash/get'
但这并不能帮助我降低捆绑包大小。下面我附上了我的webpack.config.js。我不知道为什么它不能工作。更令人惊讶的是，我的构建命
浏览 0提问于2018-08-17得票数 3
我正在做一个项目，需要CSS和JavaScript代码在不同的文件中编译。
我有一个JavaScript源文件-- <root>/src/js/main.js --按预期编译成<root>/dist/main.js。
webpack配置文件如下所示：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");
module.exports = {
mode: 'development',
entr
浏览 9提问于2022-04-18得票数 -1
回答已采纳
我有一个拆分成2个配置文件的Webpack设置：
webpack.config.js处理开发部分，该部分分别使用npx webpack-dev-server和webpack.config.prod.js触发，后者通过输入npm run build处理生产。
开发配置按预期工作，但生产配置有一个问题:一切正常，但镜像没有从源文件夹中复制和优化：src/images/sm，src/images/bg to dist/images/sm，dist/images/bg。
webpack.prod.js
const HtmlWebpackPlugin = require('html-webpac
浏览 49提问于2020-02-21得票数 1
我有一个奇怪的问题，正确进口PIXI js在我的打字项目。
问题是，在引用PIXI对象时，我从来不用使用PIXI前缀。
例如:而不是：
let s = new PIXI.Sprite(textureName);
我必须做：
let s = new Sprite(textureName);
一切正常，只是有点烦人。我有一种感觉，这就是我的tsconfig.json文件的配置方式。
我如何配置它，使它的行为像第一个选项？
{
"compilerOptions": {
"outDir": "./dist/",
"source
浏览 3提问于2019-06-03得票数 6
回答已采纳
存储库中的U P D A T E D固定代码
首先，我知道有一些关于这个话题的帖子，但是它们太过时了(webpack 1或2)
我正在尝试设置一个webpack配置，以响应图像，避免丑陋的var myImage = require('./imagePath/image.jpg');
只有当我通过scss或css (背景图像)添加图像时，它才能工作，但如果我试图在index.html或react组件中添加图像，则不会生成图像。
我正在尝试使用文件加载器、html加载器和
我用样例创建了。
您可以克隆它，只需通过npm install或yarn install安装依赖项。
在过
浏览 4提问于2017-08-01得票数 1
回答已采纳
1回答
我有一个带有基本NextJS组件的<PostList />项目，在该项目中，我使用react-apollo模块从GraphQL服务器检索一些测试数据：
import { gql, graphql } from "react-apollo";
import withData from "../../apollo/withData";
const GET_POSTS = gql`
{
posts {
_id
title
}
}
`;
const PostList = ({data: {loading, posts}}) =&g
浏览 1提问于2019-09-19得票数 1
2回答
我使用的是带有webpacker的rails应用程序。
我有一个入口文件，它的开头如下：
import grapesjs from 'grapesjs';
import loadBlocks from './../../../node_modules/grapesjs-mjml/src/blocks';
import loadComponents from './../../../node_modules/grapesjs-mjml/src/components';
import loadCommands from './../../.
浏览 3提问于2019-08-21得票数 0
注:我通读了其他类似的问题(here和其他问题)，但它们都是关于早期版本的webpack和巴别塔，并没有解决以下问题。 这是很好的服务，但当我运行npm run build时，我得到了以下错误。我该如何解决这个问题？(我怎样才能得到比这更好的错误呢？，日志也一样糟糕)。 > react_01@1.0.0 build /Users/monkeydo/Documents/code/__tests/react_01
> webpack --mode production
/Users/monkeydo/Documents/code/__tests/react_01/node_modu
浏览 33提问于2021-07-18得票数 1
将CSS文件迁移到SCSS后，我可以在第一次加载(每次重新加载页面后)看到布局元素的FOUC。
我猜这与我的webpack配置有关，所以我尝试使用来解决这个问题，但我仍然可以看到这个问题。
下面是我的webpack.config.js文件的内容：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin&#
浏览 12提问于2020-02-10得票数 0
回答已采纳
在我的compression-webpack-plugin MVC 5项目中，我使用ASP.NET将javascript文件压缩成gz格式。
具有webpack.config.js设置的compression-webpack-plugin的一部分：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
//...
plugins: [
//...
new CompressionPlugin({
test: /\.(js|css)$/,
浏览 0提问于2018-11-30得票数 6
回答已采纳
我从一个由webpack 3和类似的旧babel版本组成的配置开始。它可以在以下回购中找到：
我更新了webpack和babel的最新版本以及所有节点模块，并相应地迁移了旧配置。这一问题可能产生于其中任何一个。
完成迁移后，我注意到所有babel插件都遍历我的webpack信任的文件(这些文件位于一个单独的嵌套文件夹中)，而不是webpack正确处理的实际js源文件。(我通过在babel插件中进行一些日志记录来验证它)。
不管我是否使用.babelrc，结果都是一样的。
webpack配置文件以前位于项目的根目录，在上面链接的repo i中可以看到，现在它们位于嵌套的" config
浏览 0提问于2019-01-23得票数 0
回答已采纳
我坚持使用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
1回答
这是我的原始的webpack配置文件，由两种不同的配置组成，这两种配置都使用：
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = [{
entry: __dirname + '/src/browser/main',
output: {
path: __dirname + '/dist/browser',
filename: 'bundle.js'
},
resolve: {
ex
浏览 2提问于2017-01-22得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
