帶有熱重載的 Webpack 捆綁 Node Express = 地獄

Question

我不想承認這一點，但我花了三個漫長的夜晚試圖去做——我認為這是一件很簡單的事情。 我終於到了對它感到厭煩的階段，坦率地說相當沮喪，因為“它根本行不通”。

這是我試圖實現的目標：

1. 用 Webpack 捆綁我的 Express 服務器（雖然我當前的代碼只是在瀏覽器中呈現一個字符串，但它應該編譯用 Babel 編譯的服務器呈現的 React 組件）
2. 將包保存在內存中（如果沒有其他方法，則保存在磁盤上）
3. 運行 webpack / dev / hot 中間件來為我的 Node Express 應用程序提供服務，這種方式對服務器呈現的頁面（將是 React 組件）的更改將在瀏覽器中自動更新。

我嘗試了多種組合、已棄用的教程、不再維護的 npm 包和下載的不起作用的示例。

這是我目前的設置：

webpack.server.config.js：

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
    name: 'server',
    mode: 'development',
    target: 'node',
    externals: nodeExternals(),
    entry: [ './src/server/index' ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        // path: "/",
        filename: '[name].js',
        publicPath: '/assets/',
        libraryTarget: 'commonjs2'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname, 'src/'),
                exclude: /node_modules/,
                options: {
                    presets:
                        [['@babel/preset-env', { modules: 'false' }], '@babel/preset-react'],
                    plugins: [
                        ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
                        '@babel/plugin-proposal-class-properties'
                    ]
                }
            },
            {
                test: /\.scss$/,
                loader: 'ignore-loader'
            },
            {
                test: /\.css$/,
                loader: 'ignore-loader'
            },
            {
                test: /\.(jpg|png|svg|gif|pdf)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }
        ]
    }
};

索引.js：

import http from 'http';
import fs from "fs";
import express from "express";
import favicon from 'serve-favicon';
// import renderer from "./renderer";
import renderApp from './welcome';


const app = express();

app.use(favicon('./public/favicon.ico'));
app.use(express.static("public"));


if (process.env.NODE_ENV !== 'production') {

    const webpack = require('webpack');
    const webpackDevMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const serverConfig = require('../../webpack.server.config');

    const compiler = webpack(serverConfig);

    app.use(webpackDevMiddleware(compiler, {
        stats: {colors: true},
        headers: { "Access-Control-Allow-Origin": "http://localhost"},
        publicPath: serverConfig.output.publicPath
    }));

    app.use(require("webpack-hot-middleware")(compiler));

}

app.get("*", function(req, res) {
    fs.readFile("./src/server/html/index.html", "utf8", function(err, data) {
        const context = {};
        const html = renderApp();
        //const html = renderer(data, req.path, context);

        res.set('content-type', 'text/html');
        res.send(html);
        res.end();
    });
});

const PORT = process.env.PORT || 8080;

app.listen(3000);

坦率地說，我也對這應該如何工作感到困惑。
是否應該執行以下步驟？：

• webpack webpack.server.config.js --watch
• node dist/server.js // webpack 輸出文件夾

這會神奇地重新加載我的服務器嗎？

歡迎所有幫助，或者如果您碰巧有一個工作演示。
我只是無法完成這項工作。

最后，我還將熱重新加載（重新渲染）我的客戶端包，但我想這將是最簡單的部分，因為我已經看到了很多關於這方面的資源。

Answer 1

可能需要夜間睡眠。
我使用 StartServerPlugin 完成了這項工作（包括 React 服務器呈現的組件）。
以下設置熱重載 Node Express 服務器：

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const StartServerPlugin = require('start-server-webpack-plugin');

module.exports = {
    name: 'server',
    mode: 'development',
    target: 'node',
    externals: nodeExternals({
        whitelist: ['webpack/hot/poll?1000']
    }),
    entry: [ 'webpack/hot/poll?1000', './src/server/index' ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        // path: "/",
        filename: 'server.js',
        publicPath: '/assets/',
        libraryTarget: 'commonjs2'
    },
    plugins: [
        new StartServerPlugin({'name': 'server.js', nodeArgs: ['--inspect']}),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                "BUILD_TARGET": JSON.stringify('server')
            }
        })
    ],
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname, 'src/'),
                exclude: /node_modules/,
                options: {
                    presets:
                        [['@babel/preset-env', { modules: 'false' }], '@babel/preset-react'],
                    plugins: [
                        ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
                        '@babel/plugin-proposal-class-properties'
                    ]
                }
            },
            {
                test: /\.scss$/,
                loader: 'ignore-loader'
            },
            {
                test: /\.css$/,
                loader: 'ignore-loader'
            },
            {
                test: /\.(jpg|png|svg|gif|pdf)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }
        ]
    }
};

索引.js：

import http from 'http'
import app from './server'

const server = http.createServer(app)
let currentApp = app;

const PORT = process.env.PORT || 8080;

server.listen(PORT);

if (module.hot) {
    module.hot.accept('./server', () => {
        server.removeListener('request', currentApp);
        server.on('request', app);
        currentApp = app;
    })
}

服務器.js：

import http from 'http';
import fs from "fs";
import express from "express";
import favicon from 'serve-favicon';
import renderer from "./renderer";
import renderApp from './welcome';


const app = express();

app.use(favicon('./public/favicon.ico'));
app.use(express.static("public"));


app.get("*", function(req, res) {
    fs.readFile("./src/server/html/index.html", "utf8", function(err, data) {
        const context = {};
        //const html = renderApp();
        console.log('test');
        const html = renderer(data, req.path, context);
        res.set('content-type', 'text/html');
        res.send(html);
        res.end();
    });
});

export default app;

運行：

rm -rf ./dist && webpack --config webpack.server.config.js --watch

Answer 2

我認為這里的回答有點太復雜了。 似乎 Webpack 並沒有讓這變得容易。

我沒有嘗試編寫復雜的配置，而是自己解決了這個問題並創建了一個小型開發服務器，它會在文件更改時進行 webpack 構建和服務器重新加載。 客戶端也有重載邏輯，所以這兩種情況下的頁面都是自動重載的。

快速服務器和 webpack 客戶端的熱模塊重新加載

概要

開發服務器

const fetch = require('node-fetch')

let process

function spawnserver(){
    process = require('child_process').spawn("node", ["server/server.js", "dev"])

    process.stdout.on('data', (data) => {    
        console.error(`stdout: ${data}`)
    })

    process.stderr.on('data', (data) => {
        console.error(`stderr: ${data}`)
    })
}

function rebuildsrc(){
    process = require('child_process').spawn("npm", ["run", "build"])

    process.stdout.on('data', (data) => {    
        console.error(`stdout: ${data}`)
    })

    process.stderr.on('data', (data) => {
        console.error(`stderr: ${data}`)
    })

    process.on("close", code => {
        console.log("build exited with code", code)
        fetch("http://localhost:3000/reloadsrc").then(response=>response.text().then(content=>console.log(content)))
    })
}

spawnserver()

const watcher = require("chokidar").watch("./server")

watcher.on("ready", _=>{    
    watcher.on("all", _=>{      
        console.log("server reload")
        process.kill()
        spawnserver()
    })
})

const srcWatcher = require("chokidar").watch("./src")

srcWatcher.on("ready", _=>{    
    srcWatcher.on("all", _=>{      
        console.log("rebuild src")        
        rebuildsrc()
    })
})

客戶端重新加載

let stamp = new Date().getTime()
let lastStamp = null

app.get('/stamp', (req, res) => {
    lastStamp = new Date().getTime()
    res.send(`${stamp}`)
})

app.get('/reloadsrc', (req, res) => {
    stamp = new Date().getTime()
    res.send(`updated stamp to ${stamp}`)
})

let welcomeMessage = "Welcome !!"

let reloadScript = IS_PROD ? ``:`
let stamp = null
let reloadStarted = false
setInterval(_=>{
    fetch('/stamp').then(response=>response.text().then(content=>{                        
        if(stamp){
            if(content != stamp) setTimeout(_=>{                                
                if(!reloadStarted){
                    console.log("commence reload")
                    setInterval(_=>{
                        fetch(document.location.href).then(response=>response.text().then(content=>{
                            if(content.match(/Welcome/)){
                                console.log("reloading")
                                document.location.reload()
                            }                                        
                        }))
                    }, 1000)                                
                    reloadStarted = true
                }                                
            }, 500)
        }else{
            if(!reloadStarted){
                stamp = content
                console.log("stamp set to", stamp)
            }
        }
    }))
}, 200)    
`

app.use('/dist', express.static('dist'))

app.get('/', (req, res) => {
    res.send(`
    <!doctype html>
        <head>
            <title>Reload Express Sample App</title>
        </head>
        <body>
            <h1>${welcomeMessage}</h1>            
            <script>
                ${reloadScript}
            </script>
            <script src="dist/bundle.js"></script>
        </body>
    </html>
    `)  
})

Answer 3

Node.js、babel 和 webpack 是我這個月的禍根。 應該包括幾個組件。 您應該有一個名為“package.json”的啟動文件

內容應如下所示：

{
  "name": "react-complete-guide",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "rimraf dist && webpack --config webpack.prod.config.js --progress --profile --color"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "postcss-loader": "^2.0.7",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router-dom": "^4.2.2"
  }
}

如果您鍵入“npm start”，則運行代碼“start”：“webpack-dev-server”。 這將加載代碼的預覽。 要將內容打包到構建中，您鍵入“npm run build”，這將運行代碼“build”：“rimraf dist && webpack --config webpack.prod.config.js --progress --profile --color”。 該代碼將運行“rimraf”，它會刪除“dist”文件夾（如果存在），其余的將運行 webpack 配置文件。

你應該有兩個 webpack 文件。 一種用於熱重載，一種用於生產環境的包裝。 這些文件應該被稱為：

“webpack.config.js”和“webpack.prod.config.js”。

“webpack.config.js”的內容如下所示：

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    { 
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: '[name]__[local]__[hash:base64:5]'
                        }
                     },
                     { 
                         loader: 'postcss-loader',
                         options: {
                             ident: 'postcss',
                             plugins: () => [
                                 autoprefixer({
                                     browsers: [
                                        "> 1%",
                                        "last 2 versions"
                                     ]
                                 })
                             ]
                         }
                      }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader?limit=8000&name=images/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: 'index.html',
            inject: 'body'
        })
    ]
};

“webpack.prod.config.js”的內容如下所示：

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/new'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    { 
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: '[name]__[local]__[hash:base64:5]'
                        }
                     },
                     { 
                         loader: 'postcss-loader',
                         options: {
                             ident: 'postcss',
                             plugins: () => [
                                 autoprefixer({
                                     browsers: [
                                        "> 1%",
                                        "last 2 versions"
                                     ]
                                 })
                             ]
                         }
                      }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader?limit=8000&name=images/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new webpack.optimize.UglifyJsPlugin()
    ]
};

您還需要一個文件來告訴 babel 如何操作。 如果您使用 babel，該文件名為“.babelrc”。 內容看起來像這樣

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "> 1%",
                    "last 2 versions"
                ]
            }
        }],
        "stage-2",
        "react"
    ],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

這段代碼中發生了很多事情。 我強烈建議您觀看一些有關此的教程視頻。