使用webpack-dev-server运行节点快递服务器

node.js Webpack

Tom凯飞云

2020-03-23

我正在使用webpack通过以下配置成功运行我的React前端:

{
    name: 'client',
    entry: './scripts/main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'  
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query:{
                    presets: ['es2015', 'react', 'stage-2']
                }
            }
        ]
    }
}

我也试图建立一个node.js表达后端,并且也希望通过webpack来运行它,这样我就可以同时运行后端和前端的一台服务器,并且因为我想使用babel进行翻译我的JavaScript。

我做了一个快速的测试服务器,看起来像这样:

var express = require('express');
console.log('test');

var app = express();

app.get('/', function(req, res){
    res.send("Hello world from Express!!");
});

app.listen(3000, function(){
    console.log('Example app listening on port 3000');
});

如果运行此程序node index.js并打开浏览器,localhost:3000则会显示“ Hello world from Express !!”。到目前为止,一切都很好。然后,我尝试为其创建一个Web-pack配置:

var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
    .filter(function(x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function(mod) {
        nodeModules[mod] = 'commonjs ' + mod;    
});

module.exports = [
{
    name: 'server',
    target: 'node',
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    externals: nodeModules,
    module: {
        loaders: [
            { 
                test: /\.js$/,
                loaders: [
                    'babel-loader'
                ]
            },
            {
                test:  /\.json$/, 
                loader: 'json-loader'
            }
        ]
    }
}   

当我运行命令时,webpack-dev-server它成功启动(似乎)。但是,如果我现在打开浏览器localhost:3000,它只是说该网页不可用,就像服务器根本没有运行一样。

我对node和webpack都是新手,所以我在某个地方犯了一个小错误,或者我走得很远;)

第3031篇《使用webpack-dev-server运行节点快递服务器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android