如何使Webpack在Express服务器上构建

Question

我是React和Webpack的新手。 我有这样的webpack.config.js ：

const webpack = require（'webpack'）; const path = require（'path'）;

module.exports = {
    cache: true,
    entry: {
        'user': ['./client/User/index']
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/static'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                include: path.join(__dirname, 'client'),
                query: { cacheDirectory: true }
            }
        ]
    },
    node: { fs: 'empty' }
};

这是我的Express服务器的app.js条目：

import express from 'express';
import bodyParser from 'body-parser';
import morgan from 'morgan';
import webpack from 'webpack';
import session from 'express-session';

const app = express();

import config from './webpack.config';
const compiler = webpack(config);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/assets', express.static(`${__dirname}/static`));

app.use('/', require('./server/route/index'));

app.listen(3000, () => console.log('Our Blog is listening on port 3000...'));

Webpack不会生成，并且不会按照配置在dist文件夹中产生任何捆绑包。 仅当我使用webpack-cli命令时才能构建。 此外，在我的html文档中，我将捆绑软件包含为<script src='/static/user.bundle.js'></script> 。 我认为这必须是正确的路径，因为它将/static映射到本地计算机上的dist文件夹，该文件夹在构建后将束确切定位在本地计算机上。 但是由于找不到资源，它不断向我发送404错误。 你能帮我解决这个问题吗？

Answer 1

webpack在内存中创建文件。 因此您无法根据文档看到它。

webpack-dev-server编译后不写入任何输出文件。 相反，它将捆绑文件保存在内存中，并像在服务器根路径上挂载的真实文件一样提供它们。 如果您的页面希望在其他路径上找到捆绑文件，则可以使用开发服务器配置中的publicPath选项更改此文件。

我怀疑是因为您没有将其指定为production模式，这就是为什么它没有写入dist文件夹的原因。 另外，您需要使用webpack-dev-middleware 。 这是一个如何使用它的示例

我希望这有帮助。