首页 / 技术问答 / Node.js问答列表 / 问答详情

Node.js 如何将 webpack 与 express 一起使用

当我try 将webpack与简单的express服务器一起使用时，我总是会遇到大量错误:

'use strict';
var express = require('express');
var path = require('path');
var url = require('url');


// -------- my proxy----------------------
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set('port', process.env.PORT || 8080);
app.use(function logErrors(err, req, res, next) {
        console.error(err.stack);
        next(err);
    }
);

app.listen(app.get('port'), function() {
    console.info('Express server started at http://localhost:' + app.get('port'));
});

我得到了所有这些错误:

Version: webpack 1.10.0
Time: 1200ms
  Asset    Size  Chunks             Chunk Names
outfile  559 kB       0  [emitted]  main
chunk    {0} outfile (main) 498 kB [rendered]
    [0] ../app/server/express2.js 553 bytes {0} [built]
     + 125 hidden modules

WARNING in ../~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
 @ ../~/express/lib/view.js 78:29-56

ERROR in ../~/express/lib/request.js
Module not found: Error: Cannot resolve module 'net' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib
 @ ../~/express/lib/request.js 18:11-25

ERROR in ../~/express/lib/view.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib
 @ ../~/express/lib/view.js 18:9-22

ERROR in ../~/express/~/send/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send
 @ ../~/express/~/send/index.js 25:9-22

ERROR in ../~/express/~/etag/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/etag
 @ ../~/express/~/etag/index.js 22:12-25

ERROR in ../~/express/~/send/~/destroy/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/destroy
 @ ../~/express/~/send/~/destroy/index.js 1:17-30

ERROR in ../~/express/~/send/~/mime/mime.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/mime
 @ ../~/express/~/send/~/mime/mime.js 2:9-22

ERROR in ../~/express/~/send/~/statuses/codes.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/statuses/codes.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "100": "Continue",
|   "101": "Switching Protocols",
|   "102": "Processing",
 @ ../~/express/~/send/~/statuses/index.js 2:12-35

ERROR in ../~/express/~/send/~/mime/types.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/mime/types.json Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.

|
 @ ../~/express/~/send/~/mime/mime.js 87:12-35

ERROR in ../~/express/~/accepts/~/mime-types/~/mime-db/db.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/accepts/node_modules/mime-types/node_modules/mime-db/db.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "application/1d-interleaved-parityfec": {
|     "source": "iana"
|   },
 @ ../~/express/~/accepts/~/mime-types/~/mime-db/index.js 11:17-37

ERROR in ../~/express/~/type-is/~/mime-types/~/mime-db/db.json
Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/type-is/node_modules/mime-types/node_modules/mime-db/db.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "application/1d-interleaved-parityfec": {
|     "source": "iana"
|   },
 @ ../~/express/~/type-is/~/mime-types/~/mime-db/index.js 11:17-37

这是我的配置文件:

var webpack = require('webpack');


module.exports = {
    // Makes sure errors in console map to the correct file
    // and line number
    devtool: 'eval',
    entry: [
        './bin/www.js'
    ],
    output: {
        path: './bin/out',
        filename: 'server.js'
    },

    extensions: [
        '',
        '.jsx', '.js'
    ],

    module: {

        loaders: [
            // Compile es6 to js.
            {
                test: /app\/.*\.js?$/,
                loaders: [
                    'react-hot',
                    'babel-loader'
                ]
            }
        ]
    },

    devtool: 'source-map'
};

我能做什么，我还需要在服务器端使用webpack.

我开快车.js文件如下:

推荐答案

最后，我使用了两种不同的配置，一种是使用webpack将服务器打包，另一种是将所有浏览器打包，并运行webpack dev server进行热重新加载.

Server webpack config aka webpack.node.config.js现在看起来像这样:

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};

// note the path.resolve(__dirname, ...) part
// without it, eslint-import-resolver-webpack fails
// since eslint might be invoked with different cwd
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
    .filter(x => ['.bin'].indexOf(x) === -1)
    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });

// es5 style alternative
// fs.readdirSync(path.resolve(__dirname, 'node_modules'))
//     .filter(function(x) {
//         return ['.bin'].indexOf(x) === -1;
//     })
//     .forEach(function(mod) {
//         nodeModules[mod] = 'commonjs ' + mod;    
//     });

module.exports =

{
    // The configuration for the server-side rendering
    name: 'server',
    target: 'node',
    entry: './app/server/serverEntryPrototype.js',
    output: {
        path: './bin/',
        publicPath: 'bin/',
        filename: 'serverEntryPoint.js'
    },
    externals: nodeModules,
    module: {
        loaders: [
            { test: /\.js$/,

                loaders: [
                    // 'imports?document=this',

                    // 'react-hot',
                    'babel-loader'
                    //,'jsx-loader'
                ]
            },
            { test:  /\.json$/, loader: 'json-loader' },
        ]
    },
    plugins: [
    // new webpack.NormalModuleReplacementPlugin("^(react-bootstrap-modal)$", "^(react)$")
    // new webpack.IgnorePlugin(new RegExp("^(react-bootstrap-modal)$"))
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

Browser webpack config aka webpack.browser.config.js现在看起来像这样:

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'assets');
var fs = require('fs');


var commonLoaders = [
    { test: /\.js$/,

        loaders: [
            'react-hot',
            'babel-loader'
            //,'jsx-loader'
        ]
    }
];


module.exports =
{
    // Makes sure errors in console map to the correct file
    // and line number
    name: 'browser',
    devtool: 'eval',
    entry: [
        //'./bin/www.js',
        './app/index.js',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8081'  // WebpackDevServer host and port
    ],
    output: {
        path: buildPath,
        filename: '[name].js',
        // Everything related to Webpack should go through a build path,
        // localhost:3000/build. That makes proxying easier to handle
        publicPath: 'http://localhost:8081/assets/'
    },

    extensions: [
        '',
        '.jsx', '.js',
        '.json',
        '.html',
        '.css', '.styl', '.scss', '.sass'
    ],

    module: {

        loaders: [
            // Compile es6 to js.
            {
                test: /app\/.*\.jsx?$/,
                loaders: [
                    'react-hot',
                    'babel-loader'
                ]
            },

            ///app\/.*\.json$/
            { test:  /\.json$/, loader: 'json-loader' },

            // Styles
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.s(a|c)ss$/, loader: 'style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss!sass' },

            // Fonts
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }

            //{ test: /\.png$/, loader: 'url-loader?limit=100000' },
            //{ test: /\.jpg$/, loader: 'file-loader' }
        ],

        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin()
        ]
    },

    postcss: [
        require('autoprefixer-core')
    ],

    devtool: 'source-map'
}
;

Node.js相关问答推荐

Jest由于UUID而无法解析测试，即使在Jest中启用ESModule支持后也是如此

MongoDB如果文档S的字段小于另一个字段，则将该字段加一

如何使用NodeJS在mongodb中更新文档

如何从谷歌云中部署的应用程序连接到mongoDB Atlas？

Playwright - 无法在 img 标签中使用 file：// 访问本地文件

TS 后端开发：prismagenerate找不到已安装的@tsed/prisma包

在对象数组中的数组中嵌套 $lookup - Mongodb

如何通过node下载zip并直接解压zip？

为什么我的 Cypress Post 请求的请求正文是空的？

如何在没有 Typescript 的情况下以交互方式使用 Create-React-App？

如何在没有云功能的情况下使用 Google PubSub

NestJS 共享模块的问题

Mongoose，如何一次更新多个？

如何限制 cron 表单将消息推送到 RabbitMQ？

使用 node.js 执行一个 exe 文件

分块 WebSocket 传输

我可以有条件地将 where() 子句添加到我的 knex 查询吗？

将 NodeJS 用于大型项目

如何在 node.js 沙箱中安全地运行用户提交的脚本？

Node.js 中的 Streams3 是什么，它与 Streams2 有何不同？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630