如何使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 。 這是一個如何使用它的示例

我希望這有幫助。