Javascript 用express+;替换网页包开发服务器;Web包开发中间件/Web包热中间件
我目前正试图用一个基于express+webpack中间件的更健壮的解决方案来取代我以前使用webpack dev server的设置。 因此,我以前是这样运行它的:“webpack dev server--content base public/--history api fallback”,但现在我想这样使用它:“node devServer.js”。 以下是我当前设置的详细信息 webpack.config.dev.js:Javascript 用express+;替换网页包开发服务器;Web包开发中间件/Web包热中间件,javascript,express,webpack,webpack-dev-server,Javascript,Express,Webpack,Webpack Dev Server,我目前正试图用一个基于express+webpack中间件的更健壮的解决方案来取代我以前使用webpack dev server的设置。 因此,我以前是这样运行它的:“webpack dev server--content base public/--history api fallback”,但现在我想这样使用它:“node devServer.js”。 以下是我当前设置的详细信息 webpack.config.dev.js: var path = require('path'); var w
var path = require('path');
var webpack = require('webpack');
var debug = require('debug');
debug.enable('app:*');
var log = debug('app:webpack');
log('Environment set to development mode.');
var NODE_ENV = process.env.NODE_ENV || 'development';
var DEVELOPMENT = NODE_ENV === 'development';
log('Creating webpack configuration with development settings.');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client',
'./src/index',
'./src/scss/main.scss',
],
output: {
path: path.join(__dirname, 'public/js'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.jsx?/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
},
{
test: /\.scss$/,
loader: 'style!css!sass',
}]
},
compiler: {
hash_type: 'hash',
stats: {
chunks: false,
chunkModules: false,
colors: true,
},
},
};
devServer.js:
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var debug = require('debug');
// var history = require('connect-history-api-fallback');
var config = require('./webpack.config.dev');
var browserSync = require('browser-sync');
debug.enable('app:*');
var app = express();
var compiler = webpack(config);
var log = debug('app:devServer');
// app.use(history({ verbose: false }));
log('Enabling webpack dev middleware.');
app.use(require('webpack-dev-middleware')(compiler, {
lazy: false,
noInfo: true,
publicPath: config.output.publicPath,
quiet: false,
stats: config.compiler.stats,
}));
log('Enabling Webpack Hot Module Replacement (HMR).');
app.use(require('webpack-hot-middleware')(compiler));
log('Redirecting...');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, '/public/', 'index.html'));
});
app.get('/js/bundle.js', function(req, res) {
res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js'));
});
var port = 3000;
var hostname = 'localhost';
app.listen(port, hostname, (err) => {
if (err) {
log(err);
return;
}
log(`Server is now running at http://${hostname}:${port}.`);
});
var bsPort = 4000;
var bsUI = 4040;
var bsWeInRe = 4444;
browserSync.init({
proxy: `${hostname}:${port}`,
port: bsPort,
ui: {
port: bsUI,
weinre: { port: bsWeInRe },
},
});
你能告诉我哪里出了问题吗?我的印象是,我已经涵盖了所有的基础,但很明显,我遗漏了一些东西,因为尽管我能够访问html和js,但页面并没有显示出来(您不需要此部件:
app.get('/js/bundle.js', function(req, res) {
res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js'));
});
webpack dev server middleware将为您做到这一点。因此,我认为只要删除它就可以修复它。尝试静态资产的相对路径,例如,使用
/public/
,而不是/public/
,如下所示:
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, '/public/', 'index.html'));
});
app.get('/js/bundle.js', function(req, res) {
res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js'));
});
- 我想你肯定在这个
所在的位置有一个并行文件夹devServer.js
public
- 您正在点击的是
,而不是localhost:3000/
localhost:3000
app.use(express.static(path.resolve(__dirname, './public'),{
index: 'index.html'
}));
这样的东西对我来说很有用: 更改:
app.use(require('webpack-dev-middleware')(compiler, {
致:
然后更改你的应用程序。获取到:
我无法测试您的特定配置,因此我想知道您是否会对第一个app.get有问题,因为您请求的url与您提供的不同,即“/js/bundle.js”到“/public/js/bundle.js”。如果是这样,请尝试path.join(u dirname,/public/js/bundle.js”)
而不是req.url
第二个app.get应该为任何未解决的请求提供index.html,这对React路由非常有用
var middleware = require('webpack-dev-middleware');
app.use(middleware)(compiler, {
app.get('/js/bundle.js', function(req, res){
res.write(middleware.fileSystem.readFileSync(req.url));
res.end();
});
app.get('*', function(req, res){
res.write(middleware.fileSystem.readFileSync(path.join(__dirname, '/public/', 'index.html'))));
res.end();
});