gpt4 book ai didi

javascript - 用 express + webpack-dev-middleware/webpack-hot-middleware 替换 webpack-dev-server

转载 作者:可可西里 更新时间:2023-11-01 02:43:06 28 4
gpt4 key购买 nike

我目前正在尝试用基于 express + webpack-middleware 的更强大的解决方案替换我使用 webpack-dev-server 的旧设置。所以我曾经像这样运行它:“webpack-dev-server --content-base public/--history-api-fallback”但现在我想像这样使用它:“node devServer.js”。以下是我当前设置的详细信息。

webpack.config.dev.js:

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,
},
},
};

开发服务器.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 中间件会为你做这些。所以,我认为只需删除它即可解决问题。

关于javascript - 用 express + webpack-dev-middleware/webpack-hot-middleware 替换 webpack-dev-server,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35389346/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com