我正在开发使用Tomcat服务器的内部生态系统,它服务于java和javascript的所有文件,但我首先通过WebPack运行javascript.
有没有办法在localhost:8080上运行Tomcat服务器时使用webpack-dev-server和hot-loader for react/css/javascript文件？
我正在使用a webpack-dev-server,我正在尝试包含bootstrap.
我有这个项目结构:
?? css
? ??? bootstrap.min.css
??? js
| ??? bootstrap.min.js
??? dist
??? index.html
??? package.json
??? server.js
??? src
? ??? actions.js
? ??? App.js
? ??? components
? ??? constants
? ??? index.js
? ??? reducers.js
??? webpack.config.js
这是index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div id='root'></div>
<script src="/static/bundle.js"></script>
</body>
</html>
每当我运行服务器时,我都会收到类型错误:
Cannot GET /css/bootstrap.min.css
这是webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval', …javascript twitter-bootstrap webpack webpack-dev-server webpack-style-loader
我有一个React应用程序,其导航功能由react-router我在开发中运行webpack-dev-server并启用了历史回退选项.这是我在我的定义中的路线index.js
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRedirect to="/intro" />
<Route path="/intro" component={Intro} />
<Route path="/device" component={Device} />
<Route path="/clothing" component={Clothing} />
<Route path="/build" component={Build}>
<IndexRedirect to="/build/pattern" />
<Route path="/build/pattern" component={Pattern} />
<Route path="/build/layout" component={Layout} />
<Route path="/build/color" component={Color} />
</Route>
<Route path="/capture" component={Capture} />
<Route path="/review" component={Review} />
</Route>
</Router>
), document.getElementById('app'))
当我浏览链接时,一切正常,我可以看到嵌套的路由组件嵌套在其父路由组件中,如预期的那样.例如,当我导航到/build/color我可以看到我的App组件嵌套嵌套Build组件的Color组件.
它失败的地方是我尝试在嵌套路径中点击刷新按钮.React完全无法加载,我收到以下错误
获取http:// localhost:8080/build/app.js 404(未找到)
在我的应用程序中确实没有这样的文件,但我仍然感到困惑,为什么它会自动查找此文件而不是从根重新加载路由.请注意,在页面上点击刷新/device会没有问题.
如果您需要有关我的设置的更多详细信息,请告诉我.谢谢!
解:
我的webpack设置实际上是使用 …
routing http-status-code-404 reactjs react-router webpack-dev-server
我无法使webpack开发服务器正常工作。我认为问题在于它在内存中产生的已编译代码无法清除。我无法弄清楚哪里出了问题。
我的配置文件是：
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.join(__dirname, 'dist'),
publicPath: "/",
filename: 'js/index.js'
},
devServer: {
contentBase: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/styles.css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
})
]
}
和我的脚本：
"scripts": {
"dev": …webpack v4.20.2
webpack-dev-server v3.1.9
我正在使用webpack和运行React应用程序，webpack-dev-server并且遇到了有关的问题%PUBLIC_URL%。
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
在%PUBLIC_URL%没有被编译的index.html，所以未能获得图标。
public / index.html
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
</head>
package.json脚本
"scripts": {
"dev": "webpack-dev-server --config ./config/webpack.dev.conf.js --open",
"build": "webpack --config ./config/webpack.prod.conf.js"
},
项目结构
.
??? config
? ??? webpack.dev.conf.js
? ??? webpack.prod.conf.js
??? public
? ??? index.html
? ??? favicon.ico
? ??? manifest.json
??? src
? ??? index.js
? ...
??? …这是我的设置：
const DesktopApp = lazy(() => import(/* webpackChunkName: "DesktopApp" */'./DesktopApp'));
const MobileApp = lazy(() => import(/* webpackChunkName: "MobileApp" */'./MobileApp'));
type Props = { shouldServeMobile: boolean };
export const App = ({ shouldServeMobile }: Props): JSX.Element => (
shouldServeMobile
? (
<Suspense fallback={<AppLoading />}>
<MobileApp />
</Suspense>
) : (
<Suspense fallback={<AppLoading />}>
{/* GlobalDesktopStyle is injected in multiple places due to a bug where the
theme gets reset when lazy loading via React.Lazy + webpack */}
<GlobalDesktopStyle />
<DesktopApp /> …reactjs webpack webpack-dev-server react-hot-loader react-suspense
我有一个调用函数来重新加载页面的按钮:
function doReload() {
window.location='/'
}
Safari 11中大约有5次在控制台中抛出此错误:
WebSocket connection to 'ws://localhost:8080/sockjs-node/978/yzsndro2/websocket' failed: WebSocket is closed due to suspension.
我正在幕后运行Webpack 2 dev服务器.
在Chrome中似乎没有发生.这是High Sierra Beta所以也许是一个bug.
建议或想法？
我正在使用webpack 3，我想知道在重建webpack之前有什么方法可以清除webpack-dev-server控制台。
我正在尝试为Angular-Cli项目获取正确的设置,以便源映射在Microsoft Edge中工作.Angular-Cli v1.6.6 webpack v3.10.0
从配置中启用源地图支持,它可以在Chrome中使用,但不能在Edge中使用.在Edge中我看到如下错误:
找不到webpack:///(webpack)-dev-server/client？源地图中指定的32cc
我看到"eval code(xxx)"只链接.
从我可以google"webpack:///"不支持Edge但我无法更改Angular-Cli设置以将其更改为其他内容(或者我不明白如何).
只是执行"ng弹出"使源映射从无法工作到半工作(如何正确映射到生成的捆绑的js文件,但不是像Chrome中的非捆绑的js文件)但我仍然看到"找不到webpack:/ //"就像Edge中的消息一样.
我已经尝试编辑webpack.config.js文件来更改"devtool"设置和/或"SourceMapDevToolPlugin"参数设置.
我的测试都没有奏效.
我正在使用handlebars-loader：
{
test: /\.hbs$/,
loader: 'handlebars-loader',
}
我也在使用html-webpack-plugin。
使用Webpack Dev Server，一切都能按我的意愿进行：
如果保存了对车把模板或SCSS文件的更改，则会自动重新加载页面。
但是，一旦我能hot: true下devServer，HMR开始对SCSS变化工作（即CSS地没有全部重新加载更新），这是我想要的，但如果我改变车把模板，HMR不工作，和常规的“热重载”（即重新加载整个页面）也停止工作。
有任何想法吗？
如果HMR适用于SCSS更改，并且对把手模板进行常规的“热重载”（没有，该方法已经可以使用hot: true），那也很好。
javascript handlebars.js webpack webpack-dev-server webpack-hmr
webpack ×7
reactjs ×4
javascript ×2
webpack-4 ×2
angular-cli ×1
react-router ×1
routing ×1
safari ×1
webpack-hmr ×1
websocket ×1