webpack-dev-server注入CSS webpack没有
webpack-dev-server是一个基于Node.js的开发服务器，用于在开发环境中提供实时的编译和热更新功能。它可以帮助开发人员在开发过程中快速预览和调试前端应用程序。
webpack-dev-server的主要功能包括：
- 实时编译：webpack-dev-server会监听文件的变化，并在文件发生改变时自动重新编译应用程序，以确保开发人员能够及时看到最新的修改结果。
- 热更新：webpack-dev-server支持热模块替换（Hot Module Replacement），即在不刷新整个页面的情况下，只更新发生变化的模块，从而提高开发效率。
- 自动刷新：当文件发生改变时，webpack-dev-server会自动刷新浏览器，以展示最新的修改结果。
- 代理功能：webpack-dev-server可以配置代理，用于解决前端开发中的跨域问题。开发人员可以将API请求代理到后端服务器，以便在开发过程中进行接口调试。
- 支持多种开发模式：webpack-dev-server支持开发模式和生产模式的切换，可以根据需要进行配置。
webpack-dev-server的应用场景包括但不限于：
- 前端开发：webpack-dev-server可以提供实时的编译和热更新功能，方便开发人员进行前端代码的调试和预览。
- 前端工程化：webpack-dev-server可以与webpack等工程化工具配合使用，实现自动化构建和打包，提高开发效率。
- 前端性能优化：webpack-dev-server可以模拟生产环境，帮助开发人员进行性能优化的测试和调试。
腾讯云提供了一系列与webpack-dev-server相关的产品和服务，包括但不限于：
- 云服务器（CVM）：腾讯云提供高性能、可扩展的云服务器，可以用于部署和运行webpack-dev-server。
- 云存储（COS）：腾讯云提供可靠、安全的云存储服务，可以用于存储前端应用程序的静态资源。
- 云网络（VPC）：腾讯云提供灵活的云网络服务，可以用于搭建安全可靠的网络环境，保障webpack-dev-server的正常运行。
- 云安全（SSL证书）：腾讯云提供SSL证书服务，可以为webpack-dev-server提供安全的HTTPS访问。
更多关于腾讯云相关产品和服务的介绍，请参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
我和webpack一样是Node.js应用程序的新手。在开发期间，我会运行webpack-dev-server来提供我的包，它会创建样式标签，并将所有的css放在上面。既然我不能运行webpack-dev-server，我该如何将css放在生产服务器上的样式标签中呢？
浏览 0提问于2017-04-08得票数 1
Webpack devServer.contentBase说
还可以从多个目录服务：
webpack.config.js
module.exports = {
//...
devServer: {
contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'assets')]
}
};
通过CLI使用
webpack-dev-server --content-base /path/to/content/dir
我不知道如何通过CLI通过多条路径。
在我的pa
浏览 0提问于2019-02-02得票数 3
我有一个index.js文件来导入我的CSS和几个包，但是在绑定所有的东西并启动服务器之后，我注意到index.js没有运行。我在index.js中做了一个简单的index.js，但没有到达。
我从一个工作正常的项目中复制了我的webpack.config文件的内容，所以我不确定它是文件结构/路径错误还是其他错误。有什么想法吗？
目录结构：
webpack.config.js：
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin
浏览 0提问于2019-03-28得票数 5
回答已采纳
又浪费了一天时间，因为弄清楚了如何用热重加载设置webpack开发服务器。我想在index.html中为我的JS和CSS资产提供以下路径：/dist/js/app.min.js和/dist/css/styles.min.css。
我应该如何配置webpack.config.js，以便用上面提到的正确路径加载index.html中的资产？使用当前的配置，webpack-dev-server只在/dist文件夹中保存我的构建，而在index.html中，我必须设置没有js或css文件夹的路径，例如：(<script src="/dist/app.min.js" />)。
浏览 3提问于2017-11-18得票数 3
1回答
运行服务时“无法获得/”
、、、
我对webpack有点陌生。
我在webpack的基础上做了一个简单的项目。
我想通过运行以下命令来测试该项目：
npm run serve
我收到消息了：
无法获得/
这是我的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 stylesH
浏览 8提问于2021-12-05得票数 0
回答已采纳
3回答
我一直在玩弄Webpack的不同特征，我慢慢地理解了一些事情。
典型控制台-输出：
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR] - 14
[HMR] Nothing hot updated.
[HMR] App is up to date.
不管
浏览 3提问于2015-05-01得票数 14
回答已采纳
2回答
我现在有了最简单的项目结构：
root
|-src
--|index.pug
--|--styles.css
--|--app.js
|-public
--|--img
套餐：
"devDependencies": {
"css-loader": "^0.26.1",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.26.0",
浏览 5提问于2017-01-19得票数 3
我正在使用webpack-dev-server进行开发，但是在升级到webpack 5之后，当postcss-loader无法解析css文件时，它就会停止。
我通过npx webpack-dev-server启动开发服务器，当我开始在.css中输入新规则时，webpack尝试重新构建我的应用程序，但是由于我还没有完成输入，所以文件中包含了不正确的css规则。因此，由于postcss-loader抛出错误CssSyntaxError，生成失败。然而，这使得webpack-dev-server完全停止了。以前，webpack-dev-server只是忽略了失败的构建，直到webpack成功地构建了
浏览 14提问于2022-07-11得票数 0
回答已采纳
1回答
我正试图为幽灵制作一个主题--使用React。我正在用webpack作为我选择的构建工具。我如何告诉webpack提供一个特定的.hbs文件？现在看来，Webpack只支持.html文件。下面是我的开发配置..。webpack通常支持任何传递给它的东西吗？
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:
浏览 0提问于2016-07-01得票数 8
我为我的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
回答已采纳
我是新来的webpack，我面临着一个问题，试图建立一个简单的网页。虽然我在使用webpack-dev-server时没有问题，但是当我使用webpack构建应用程序时，我在index.html文件中看不到CSS。
这是webpack.conf.js
var path = require( "path" );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
module.exports = {
entry: {
index: path.join( __dirna
浏览 26提问于2019-07-12得票数 2
回答已采纳
我试图简单地运行webpack serve -c myconfig.js，但我不断收到以下错误： ERROR in ./node_modules/webpack-dev-server/client/index.js?http://localhost:9000 6:16-37
Module not found: Error: Can't resolve 'strip-ansi' in '/home/aironside/Documents/private/webpack-example/node_modules/webpack-dev-server/client&
浏览 382提问于2021-04-24得票数 1
回答已采纳
我是webpack的新手，我有一个小项目在当地运行良好，但是当我部署到Heroku时，我会得到以下错误：
GET https://guarded-garden-60077.herokuapp.com/bundle.js net::ERR_ABORTED
状态代码为404，未找到bundle.js。我想在某个地方有webpack目录路径问题，但我不知道在哪里。
Heroku日志：
2018-02-13T16:57:39.008194+00:00 heroku[router]: at=info method=GET path="/" host=guarded-garden-6007
浏览 2提问于2018-02-13得票数 0
当我在app.js和main.css运行时更改main.css和webpack-dev-server时，包将被更新。但是，当我更改index.html时，内容不会刷新；如果我向webpack-dev-server添加一行，则webpack-dev-server不会刷新页面上的任何内容。这是我的webpack.config.js和package.json文件。我希望你能帮助我。
webpack.config.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-se
浏览 7提问于2016-05-13得票数 8
我正在localhost:8000上运行一个localhost:8000应用程序。
我想使用webpack-dev-server来重新加载css、react和js组件。
已将代理设置为http://localhost:8000，但webpack-dev-server 没有重新加载浏览器。
这是webpack.config.js
var path = require( 'path' );
var autoprefixer = require( 'autoprefixer' );
module.exports = {
entry: [
&#
浏览 2提问于2016-12-01得票数 2
1回答
我用点燃元素创建了自定义的web组件，它与Chrome、Firefox、Eadge、Opera都很好地工作，但只在IE11中不工作。我还试图将它编译成es5，但仍然没有成功。
IE控制台中的错误：
Webpack规则：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['@babel/pl
浏览 1提问于2019-10-04得票数 0
*编辑：示例(希望)讲得更清楚。
我肯定我错过了一些简单的东西，但我看不见.
我使用的是一个HtmlWebPlugin实例，每个页面/入口点都有一个模板。当我使用webpack-dev-server时，只有第一个实例实际上尊重模板中的内容，其余的只是使用简单的html和meta标记。
将文件写入磁盘时，可以使用WriteFilePlugin和dev-server，或者只需构建不带dev-server的文件，就可以正确地使用模板。我很困惑。
期望值：约. just /index.html-这是我使用写文件webpack插件和只运行'webpack --config webpack.co
浏览 8提问于2020-07-28得票数 1
回答已采纳
当我在运行webpack-dev-server时更改我的文件时，包的文件不会被更新。下面是我的webpack.config.js和package.json文件，从npm脚本中可以看到，我已经解决了在同一个命令(npm run watch & webpack-dev-server --content-base ./ --port 9966)中运行webpack watch和webpack-dev-server的问题：
webpack.config.js：
'use strict';
var ReactStylePlugin = require('react-s
浏览 7提问于2015-04-18得票数 56
回答已采纳
我正在设置一个基本Webpack安装，并希望有自动浏览器重新加载前处理的CSS在@导入的文件使用和插件。目前，如果我修改和保存一个@导入的文件，浏览器就不会刷新(在下面的示例中是body.css)。然后，如果我保存根引用的CSS文件(styles.css)，浏览器将刷新并反映对@导入文件所做的任何更改。
我试过使用可配置的webpack开发服务器，并使用server.js.我已经尝试了没有和热模型重新装载(HMR)安装。
有没有办法让webpack看@导入CSS文件，还是说我根本上漏掉了什么东西？
package.json
"dependencies": {
"re
浏览 4提问于2016-02-12得票数 3
回答已采纳
2回答
我刚刚开始使用webpack来开发React应用程序。我的配置文件如下：
var webpack = require('webpack');
module.exports = {
devtool: "eval",
entry: {
app: [
"webpack-dev-server/client?http://0.0.0.0:8080",
"webpack/hot/only-dev-server",
"./src/scripts/main.js"
]
浏览 2提问于2015-03-08得票数 6
我现在正在使用webpack v4，试图在我的项目中添加webpack-dev服务器.我在这里面临的问题是，当我运行webpack-dev-server命令my时，它会在默认浏览器中打开本地服务器，但不会为已编译的资产提供服务，也不会监视文件中的更改。
我还没有实现热模块替换。
以下是项目结构
package.json
{
"name": "webpack-starterkit",
"version": "1.0.0",
"description": "webpack starter
浏览 0提问于2018-06-23得票数 3
我试图使用Webpack热模块替换我的CSS。
我运行PHP内置服务器(php -S localhost:8000 -t .)来加载以下index.php文件，该文件位于我的项目的根目录：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test webpack</title>
</head>
<body>
<h1>Hello world</h1>
浏览 1提问于2017-08-17得票数 3
1回答
默认情况下，Webpack会在指定的目录中查找特定的index.html文件，对吧？我想知道的是，我可以让webpack在我指定的文件中查找并注入我捆绑的文件吗？
我之所以这样问，是因为我正在尝试与webpack一起开发一个Ghost主题，并且在默认情况下，Ghost主题会查找一个default.hbs文件作为索引文件。
我尝试使用HtmlWebpackPlugin来设置输入的文件名，同时为web pack的输出设置相同的文件，但它不起作用。
这是我当前的webpack.dev.config.js
var path = require('path');
var webpack
浏览 0提问于2016-06-30得票数 2
1回答
比方说，您有一些变量想要在css和js代码之间共享：
vars.js
module.exports = {
'body-margin': '100px',
};
style.css
body {
margin: var(--body-margin);
}
entry.js
var vars = require('./vars.js');
require('./style.css');
document.body.appendChild(
document.createTextNode(vars['b
浏览 3提问于2017-09-25得票数 0
回答已采纳
运行webpack时出错-dev-server
ERROR in ./css/app.scss
Module build failed: Error: Parameter 'dependency' must be a Dependency
at Compilation.process [as _addModuleChain] (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack/lib/Compilation.js:347:9)
at Compilation.process [a
浏览 3提问于2015-12-18得票数 1
我将SASS添加到我的项目中，因为我喜欢为我的CSS使用SASS。在我的app文件夹中，我创建了CSS文件夹和SCSS文件夹。我运行sass --watch scss:css将我的scss更改映射到css文件夹。我认为这工作得很好。在我的webpack中，我添加了一个加载器来处理SCSS和SASS，并将需要的文件添加到我的package.json中。为了开始使用SASS样式，我需要将它们包含在我的index.html文件中，还是需要将它们导入到每个组件中，以便在新的es6导入x from 'xpath‘中使用它们？
下面是我的package.json和webpack.config.js
浏览 4提问于2016-12-10得票数 0
我没有给出任何具体的命令来加载index.html，但是每当我在文件中进行更改时，webpack都会加载index.html页面。
webpack.config.js文件和package.json文件附在下面
webpack.config.js
var config = {
entry: './root.tsx',
output: {
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8888
},
node: {
fs: "empty",
浏览 1提问于2018-02-13得票数 0
回答已采纳
我正在开发一个reactjs项目，并使用webpack-dev-server来运行我的应用程序。
每当我更改某个js文件时，react-hot都不会刷新我的浏览器。此外，当刷新我的浏览器时，更改不会出现。我不得不关掉我的webpack-dev-server。这是我的package.json文件：
{
"name": "someApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
浏览 1提问于2016-12-17得票数 2
我正在尝试使用摘录文本Webpack插件，但我还无法为编译后的sass文件生成一个新的css文件。
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : './src/app.js',
output : {
filename : './dist/bundle.js'
},
module: {
rules
浏览 5提问于2018-02-15得票数 2
回答已采纳
我使用webpack-以下配置的简单模板：
package.json
{
"name": "vue-wp-simple",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "v",
"private": true,
"scripts": {
"dev": "webpack-dev-server --i
浏览 6提问于2017-09-24得票数 28
回答已采纳
1回答
所以我使用web，这是我的package.json。
{
"name": "postronix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
浏览 0提问于2016-09-05得票数 0
回答已采纳
我是新来的webpack，我正在尝试让它与吞咽工作。我正在使用以下链接中的指南，但它似乎不起作用：
https://webpack.github.io/docs/usage-with-gulp.html
谁能告诉我我的配置的哪一部分是错的？
gulpfile.js
import gulp from 'gulp';
import webpack from 'webpack';
import gutil from "gulp-util";
import WebpackDevServer from "webpack-dev-server"
浏览 6提问于2016-08-17得票数 0
是我用来测试webpack服务器的项目
这是我的package.json
{
"dependencies": {
},
"devDependencies": {
"webpack-dev-server": "^3.11.0",
"css-loader": "^3.5.3",
"serve": "^11.3.0",
"webpack": "^4.43.0",
"webpack-c
浏览 118提问于2020-05-22得票数 1
我正在尝试安装一个Webpack和Babel来使用没有CRA的反作用。
在安装webpack-dev-server，期间，我遇到了一些依赖关系问题
PS C:\Users\Lebedev\Desktop\projects\frontend-graduation-project> npm install --save-dev webpack-dev-server
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack@5.4.0
n
浏览 1提问于2020-11-15得票数 3
回答已采纳
这是我的webpack配置：
var path = require('path');
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var fs = require('fs'),buildPath='./dist/';
var folder_exists = fs.existsSync(buildPath);
if(folder_exists == true)
{
requir
浏览 4提问于2016-09-20得票数 10
2回答
在github.io上渲染时出现404 ( net::ERR_ABORTED 404)错误。由于某种原因，它看不到stylesheet.css。localhost运行得很好。我在index.html中移动了链接，但它没有帮助。有什么想法吗？enter image description here enter image description here {
"name": "js_project_skeleton",
"version": "1.0.0",
"description": "sk
浏览 9提问于2020-06-23得票数 2
1回答
Webpack没能编译
、、、、
我刚刚开始学习反应，我正在和Webpack一起实施。
这是我的devDependencies package.json
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react-hot-load
浏览 2提问于2017-06-24得票数 1
回答已采纳
我和npm run dev有问题。它不断地告诉我，无法找到模块webpack-cli/bin/config-yargs。添加的模块(如webpack、webpack-cli和webpack-dev-server )都在其最新版本中。谁也经历过同样的问题？
我已经尝试过重新安装上面提到的模块，并且查看了github和堆栈论坛来寻找解决方案，但是没有一个对我有用。
package.json**:**
scripts: {
"dev": "webpack-dev-server --inline --progress --config
buil
浏览 3提问于2018-12-25得票数 2
我试着安装了react-hot-loader，但是这不起作用，我得到了错误
main.9d9605180f32844bc508.css
Cannot use [chunkhash] or [contenthash] for chunk in '[name].[contenthash].js' (use [hash] instead)
webpack配置
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'production',
浏览 24提问于2020-02-12得票数 1
我在项目文件夹中运行此命令
npm install --global webpack webpack-dev-server
它返回：
/usr/lib
├── webpack@1.14.0
└── webpack-dev-server@1.16.2
/usr/lib/node_modules下有/usr/lib/node_modules目录下的webpack和webpack-dev-server文件夹，webpack命令起作用，webpack-dev-server命令返回：
webpack-dev-server: command not found
配置j
浏览 5提问于2017-01-11得票数 1
我使用webpack-dev-server在本地充当CDN服务器，为css、js、html等各种静态资产提供服务。
一切运行正常，但出于调试目的，我看不到CDN服务器收到的请求。
一旦编译了静态资产包，webpack-dev-server就会静默，不会显示任何信息/错误。
我也查看了命令行帮助，但没有成功。
浏览 1提问于2017-01-24得票数 26
回答已采纳
1回答
所以我试图让我的webpack配置文件创建一个编译的css文件，这样以后当我添加了webpack-dev-server时，我就可以编译我的js和css，并把它放到dist文件夹中。我认为这已经足够简单了，所以到目前为止我在我的webpack.config.js文件中已经有了这个
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ['./js/app.js', './scss/main.scss'],
outp
浏览 1提问于2017-12-05得票数 0
2回答
因此，在我的npm运行启动过程中，它不会捕捉到scss文件的任何更改，这些文件会被编译成css文件。当我运行时，scss工作得很好，但是它没有捕捉到任何css更改。我已经添加了css脚本，我也会跑到一边，然而，这也不起作用。你们都知道如何解决这个问题吗？或者你们中有谁有webpack的工作设置来捕捉npm运行启动时scss的变化？
实际上，当我进行更改时，我会看到终端重新编译，所以我知道它正在被捕获。这是一个反应应用程序fyi。下面是我的webpack配置文件(在运行构建过程中工作)
const path = require('path');
const HtmlWebpack
浏览 0提问于2019-03-17得票数 0
回答已采纳
我正在使用webpack和sass-loader在我的公共目录中生成一个custom.css文件。我的webpack.config文件包含以下内容：
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
..。
if(process.env.NODE_ENV === 'development'){
var loaders = ['react-hot','babel']
} else {
var loaders
浏览 12提问于2017-02-02得票数 1
我正在使用webpack来管理我的web应用程序，并使用webpack-dev-server来开发web服务器。我知道，webpack开发的服务器上有一个--watch开关，可以观察源码内容的变化。但是，当我运行webpack-dev-server --watch命令，然后更改源代码时，它不会重新加载源代码。我必须关闭服务器，然后运行webpack命令重新捆绑我的目标文件。下面是我的webpack-config.js文件，其中包含watch: true配置。我不明白为什么webpack-dev-server看不到源码的变化。
module.exports = {
entry: {
ap
浏览 0提问于2016-05-19得票数 0
当我运行npm run dev mini-css-extract-plugin捆绑时，但当我运行npm run server时，mini-css-extract-plugin不捆绑。
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-p
浏览 3提问于2018-05-22得票数 6
1回答
我已经设置了一个简单的WEBPACK构建脚本，它直到昨晚都工作得很好，现在没有任何更改，我得到了以下错误，服务器还没有准备好启动。 events.js:183
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 127.0.0.1:1000
at Server.setupListenHandle [as _listen2] (net.js:1360:14)
at listenInCluster (net.js:1401:12)
at GetAddrInfoReqWrap.doListen [a
浏览 11提问于2019-01-04得票数 0
回答已采纳
我想要加载svg图像，所以我下载了svg-内联加载器。并使用以下示例进行配置：。在尝试加载svg文件之后，我得到了这个。如果不使用webpack svg -内联加载程序，加载svg文件将给我一个错误。有什么好办法解决的吗？
HTML
<img src="./svg/facebook-square-brands.svg" alt="Facebook"/>
我的Webpack配置file.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const Mini
浏览 1提问于2019-03-27得票数 6
回答已采纳
我在我的反应项目中使用webpack热模块替换。配置如下所示。
let compilerConfig = {
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://0.0.0.0:9000/',
'webpack/hot/only-dev-server',
path.join(ws.srcDir, 'client', 'src', 'index.js'),
浏览 2提问于2018-05-31得票数 2
回答已采纳
我有一个Webpack 4项目，当使用webpack-dev-server时，当一个构建完成时，我得到了很多日志，这是我真的不需要的。
i ｢wdm｣: Compiling...
‼ ｢wdm｣: Built at: 2018-4-15 09:15:18
Entrypoint main = styles.css bundle.js
[./node_modules/ansi-html/index.js] 4.16 KiB {main}
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main}
[./node_modules/react-d
浏览 0提问于2018-04-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
