我尝试像这样为我的反应应用程序设置嵌套路由
/ -> 主页/about -> 关于页面/protected -> 受保护的默认页面/protected/page1 -> 受保护的第 1 页它在 codeandbox ( https://codesandbox.io/s/react-router-nested-route-utqy7 ) React 16.8.1 React Router 4.3.1 中工作正常
但是当我用 webpack-dev-server (3.7.1) 设置同样的东西时，它只能到达/而不能到达其余路由。
我的文件结构就像
??? package.json
??? src
? ??? index.jsx
? ??? index.html
??? webpack
? ??? paths.js
? ??? webpack.common.js
? ??? webpack.dev.js
??? webpack.config.js
路径.js
const path = require('path');
module.exports = {
outputPath: path.resolve(__dirname, '../', 'build'),
entryPath: path.resolve(__dirname, '../', 'src/index.jsx'),
templatePath: path.resolve(__dirname, '../', 'src/index.html'),
};
webpack.common.js
const webpack …我根据手册https://threejs.org/docs/#manual/en/introduction/Import-via-modules将 Three.js 库作为模块运行时遇到问题
这就是我所做的：
创建 package.json
npm init
安装 webpack
npm i --save-dev webpack webpack-cli
安装 Three.js
npm install three
使用以下代码创建 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - cloth simulation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #cce0ff;
color: #000;
}
a {
color: #080;
}
</style>
</head>
<body>
<script type="module" src="./src/index.js"></script>
</body>
</html>
创建一个 src 文件夹并将一个名为 index.js 的文件放在我导入三个的 src 文件夹中
import * as THREE from 'three';
安装 liveserver 以运行服务器：
npm …我在使用 webpack 和 babel 设置我的 React 应用程序时遇到了这个错误。我尝试更改 babel 的版本，但仍然出现相同的错误。我不明白问题出在哪里。
ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/arslan/Downloads/code/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:120:22)
at loadPrivatePartialConfig
这是我的 Index.jsx 文件，它是根文件。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './store'
import …我遇到以下错误：
Warning: Text content did not match. Server: "But I want to be altered by the client" Client: "Test"
in div (at pages/index.tsx:17)
in div (at pages/index.tsx:6)
in HomePage (at _app.tsx:5)
in MyApp
in Container (created by AppContainer)
in AppContainer
...使用以下设置：
NextJS 应用组件：
function HomePage() {
return (
<>
<div id="test-div">I am rendered on the server.</div>
<script src="http://localhost:8080/bundle.js"></script>
</>
);
}
export default HomePage;
（注意：该 URLhttp://localhost:8080/bundle.js假设 webpack-dev-server 正在运行并提供该资源）
包含的“示例”脚本：
const element = document.getElementById('test-div') as any;
element.innerHTML = 'But …我正在尝试配置一个 vue 项目，以便 webpack-dev-server 代理/data对两个主机之一的请求，具体取决于调用的 npm-run 命令：
npm run serve-foo
npm run serve-bar
这是配置：
// package.json
{
scripts: {
'serve-foo': 'vue-cli-service serve -- http://192.168.7.2',
'serve-bar': 'vue-cli-service serve -- http://192.168.7.3',
}
和
// vue.config.js
// prints "node.exe vue-cli-service.js serve -- http://192.168.7.2"
console.log(...process.argv);
module.exports = {
devServer: {
// ...
proxy: {
'/data': {
target: process.argv[4]
}
}
}
}
现在，当我运行 npm run serve-foo 时，会发生以下错误。我究竟做错了什么？难道vue-cli-service不支持使用--经过论证？
This dependency was not found:
C:\Project\http:\192.168.7.2 in multi (webpack)-dev-server/client?http://192.168.0.5:80/sockjs-node …我正在学习将 rails 5 部署到 docker。一切正常，直到我安装了 react webpacker。它似乎试图连接到错误的端口并导致反应故障。
我已经尝试在 development:dev_server:host = 0.0.0.0 下更新 config/webpacker.yml，但仍然无法正常工作
错误日志如下
web_1 | #<SocketError: Failed to open TCP connection to webpack_dev_server:3035:80 (getaddrinfo: Name or service not known)>
web_1 | /usr/local/lib/ruby/2.6.0/net/http.rb:949:in `rescue in block in connect'
web_1 | /usr/local/lib/ruby/2.6.0/net/http.rb:946:in `block in connect'
web_1 | /usr/local/lib/ruby/2.6.0/timeout.rb:93:in `block in timeout'
web_1 | /usr/local/lib/ruby/2.6.0/timeout.rb:103:in `timeout'
web_1 | /usr/local/lib/ruby/2.6.0/net/http.rb:945:in `connect'
web_1 | /usr/local/lib/ruby/2.6.0/net/http.rb:930:in `do_start'
web_1 | /usr/local/lib/ruby/2.6.0/net/http.rb:925:in `start'
web_1 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:71:in `session'
web_1 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:60:in `response'
web_1 | /usr/local/bundle/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:29:in `headers'
web_1 | …在 rails 6 中得到这个错误，在 rails 5 中，在将应用程序更新到 rails 6 后很容易修复，包括 webpack 这个错误出现在我尝试关闭 js.erb 文件中的模型的每个地方。
我的文件：pack/application.rb
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import "bootstrap";
import "./src/application.scss";
import "jquery"
文件包/src/application.scss
@import "~bootstrap/scss/bootstrap";
文件 config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
webpack webpack-dev-server ruby-2.4 webpacker ruby-on-rails-6
我的 webpack-dev-server 通常正常工作，实时更新工作正常，一切都很好。
但是，如果我保存了一个语法错误的文件，服务器将停止编译并要求我重新启动它以使其再次工作。
例如，假设我不小心在 .scss 文件中添加了一个额外的逗号，webpack-dev-server 会输出错误：
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after '...oto Condensed",': expected expression (e.g. 1px, bold), was ", sans-serif;"
on line 18 of /Users/r/Documents/sol/src/styles/app.scss
>> font-family: "Roboto Condensed",, sans-serif;
----------------------------------^
@ ./src/styles/app.scss 2:26-181
@ ./src/index.jsx
? ?wdm?: Failed to compile.
但是当我通过删除逗号修复错误并保存文件时，服务器不会像往常一样重新编译（它似乎根本没有输出任何东西）。我必须杀死 webpack-dev-server 并重新启动它。
我在网上找到的最接近我的问题的是这个https://github.com/webpack/webpack-dev-server/issues/463，但那里的解决方案没有解决我的问题。
这是我的 webpack.config.js：
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.jsx'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
devServer: {
publicPath: '/output/',
contentBase: …Webpack 正在编译单个文件组件，但不加载 CSS。HTML 和 Vue 正确呈现，但没有 CSS。这似乎是 webpack 配置的问题。知道出了什么问题吗？
我正在使用webpack-dev-server加载开发服务器。
源代码/索引.html
<html>
<head>
<title>Vue Hello World</title>
</head>
<body>
<h1>Header</h1>
<div id="app"></div>
</body>
</html>
源代码/你好.vue
<template>
<p>{{ greeting }} Test!</p>
</template>
<script>
module.exports = {
data : function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
</style>
源代码/main.js
import Vue from 'vue';
import Hello from './Hello.vue';
new Vue({
el: '#app',
render: h => h(Hello),
}); …我正在使用带有“clean-webpack-plugin”：“^3.0.0”的最新版本的 webpack 5.3.2。显然插件在我构建时没有清理 dist 文件夹。
这是我的 webpack 信息：
Binaries:
Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npm
Browsers:
Chrome: 86.0.4240.111
Firefox: 82.0
Packages:
clean-webpack-plugin: ^3.0.0 => 3.0.0
copy-webpack-plugin: ^6.2.1 => 6.2.1
terser-webpack-plugin: ^5.0.3 => 5.0.3
webpack: ^5.3.2 => 5.3.2
webpack-cli: ^4.1.0 => 4.1.0
Global Packages:
webpack-cli: 4.1.0
webpack: 5.3.2
这是我的 webpack 配置：
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'development',
entry: …