- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试制作我自己的 redux 入门工具包并对其进行了一些重构,但不知何故,现在我的 bundle.js(和 style.css)没有被 webpack-dev 正确地提供给页面-中间件
。一直困扰着我找不到解决方案,所以在这里我寻求一些帮助:)
与问题有关的四个主要文件如下:
/src/server.js
import express from 'express';
import configureMiddleware from './serverConfig.js';
const app = express();
const PORT = process.env.PORT || 3000;
app.use(configureMiddleware());
app.listen(PORT, (error) => {
if (error) {
throw error;
} else {
console.log(__dirname);
console.log(`All is good @ http://localhost:${PORT}`);
}
});
/src/serverConfig.js
import express from 'express';
import compression from 'compression';
import React from 'react';
import { match, RouterContext } from 'react-router';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import routes from './routes';
import config from '../webpack.config.client';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
const IS_DEV = process.env.NODE_ENV !== 'production';
function addSharedMiddleware(app) {
app.set('view engine', 'pug');
app.set('views', __dirname);
app.get('*', (req, res) => {
match({ routes, location: req.url }, (err, redirect, props) => {
if (err) {
res.status(500).send(err.message);
} else if (!props) {
res.status(404).send('Not Found');
} else {
// Set initialState here if needed.
const initialState = {};
const store = configureStore(initialState);
const react = (
<Provider store={store}>
<RouterContext {...props} />
</Provider>
);
const reactString = renderToString(react);
const finalState = store.getState();
res.render('index', { reactString, finalState });
}
});
});
}
function addDevMiddleware(app) {
const compiler = webpack(config);
const middleware = webpackDevMiddleware(compiler, {
publicPath: config.output.path
});
app.use(middleware);
app.use(webpackHotMiddleware(compiler));
}
function addProdMiddleware(app) {
app.use(compression());
app.use(express.static('/'));
}
export default function () {
const app = express();
addSharedMiddleware(app);
if (IS_DEV) {
addDevMiddleware(app);
} else {
addProdMiddleware(app);
}
return app;
}
/webpack.config.client.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const clientConfig = {
context: `${__dirname}/src`,
debug: true,
entry: [path.join(process.cwd(), 'src/app.js')],
output: {
path: path.join(process.cwd(), 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
target: 'web',
plugins: [
new CopyWebpackPlugin([{
from: 'index.pug'
}]),
new ExtractTextPlugin('style.css')
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel']
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css', 'sass'])
}
]
}
};
if (process.env.NODE_ENV !== 'production') {
clientConfig.entry.unshift('webpack-hot-middleware/client?reload=true');
clientConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
)
} else {
clientConfig.plugins.push(
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
module.exports = clientConfig;
最后但同样重要的是,这是我用来提供服务的 package.json 脚本:"serve": "babel-node ./src/server.js"
tl;dr webpack-dev-middleware
错误地提供包
有人知道怎么回事吗?
谢谢,乔里
最佳答案
我修好了!问题是中间件的加载顺序错误。
只需将 ./src/serverConfig.js
的导出函数更改为以下内容即可解决我的问题。
function configureMiddleware () {
if (IS_DEV) {
addDevMiddleware(app);
} else {
addProdMiddleware(app);
}
addSharedMiddleware(app);
}
关于javascript - Webpack 开发中间件未正确提供 bundle.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37566674/
这个问题已经有答案了: Difference between $Bundle install and $Bundle update (2 个回答) 已关闭 9 年前。 bundle 之间有什么区别,
我正在尝试加载 Nib ,但不断收到以下错误: -[NSViewController initWithCoder:] could not instantiate an NSViewController
bundle有什么区别& bundler命令? bundle有什么区别& bundle install ? 如果没有区别,为什么有多个命令做同样的事情? 最佳答案 可执行文件 bundle & bun
我们有托管在应用程序中的单元测试。要加载测试资源,我们使用:Bundle(for: TestClass.self).path(forResource: "some-file", ofType: "js
我刚刚克隆了一个新的 repo 并尝试运行 bundle install但出现以下错误 Fetching gem metadata from https://abcderepos.net/api/ge
我添加了一个共享框架来在应用程序和 watch 扩展之间共享代码。后来我删除了共享框架,因为它会导致很多问题。我可以 build 并在 iphone 上运行我的应用程序并观看。然而,当我提交到应用商店
这个问题有点类似于 this one ,但不完全是。我有一个 C# 游戏引擎,我正在与一些想要使用我的引擎的人一起工作。最初我设计了引擎,以便所有 Assets 都是外部的——非程序员可以创建艺术、音
我正在尝试使用 OSGi 实现客户端-服务器模型。服务器应用程序是在计算机中运行的 OSGi 框架,客户端应用程序远程连接到其控制台并通过 Java 套接字发送命令并接收正确的响应。每个客户端应用程序
我目前正在将我的 Angular 2 应用程序与 WebPack bundle 在一起。我们仍在快速循环,因此我们不想在构建和应用程序加载过程中增加延迟,而是希望包括很少更改的 Angular 2 U
基本上,我有一个捆绑软件,经常在其他 View 中使用,加上其他js文件,因此我可以在保留其顺序的同时将这些文件添加到现有捆绑软件中吗? 最佳答案 我到处都在查找它,但找不到将两个捆绑软件合并在一起的
我有一个大约 12GB 的巨大 mercurial 存储库。我需要在另一台机器上克隆它,但是从网络中提取它需要花费很多时间。当我尝试将所有变更集 bundle 到一个 bundle 文件中时,文件的大
我可以使用 Sonata User Bundle 将 FOS 包集成到 sonata Admin 包中。我的登录功能正常。现在我想添加 FOSUserBundle 中的更改密码等功能到 sonata
如果我检查使用 angular-cli 创建的 angular 2 项目的 index.html 文件,我可以看到该页面仅包含 dist 文件夹中的 3 个文件: inline.bundle.js v
我从程序包管理器http://localhost:4502/crx/packmgr/index.jsp中从正在运行的AEM实例下载了一个zip文件。提取后的zip文件包含jcr_root和META-I
已经提出了有关捆绑名称和捆绑显示名称的类似问题,例如: What's the difference between "bundle display name" and "bundle name" in
我正在尝试在 iTunes 上上传我的应用程序。为此,我创建了一个应用程序 ID 并保留了一个包标识符。在我的项目中,我更改了 info.plist 文件中的包标识符。但是,当我尝试在 itunes
我想从 OSGI 包启动 OSGI 包。正如您所看到的,此代码通过从目录部署它来启动 bundle : private void installStartBundle(BundleContext bc
所以这真的让我头疼,我终于放弃了,在这里发表了问题。我正在尝试更新iTune商店中的一个客户端应用程序,并且在上传到App Store时遇到以下错误。 因此,我已经尝试通过两次使用包sid id创建新
我在 typescript 中使用 aurelia,我想避免使用像这样的相对导入路径: import { DialogBox } from '../../resources/elements/dial
有什么区别 ResourceBundle.getBundle("Bundle") 还有这个 ResourceBundle.getBundle("/Bundle") 最佳答案 来自the Java do
我是一名优秀的程序员,十分优秀!