Question

我正在开发一个带有服务器端渲染的React应用程序，并且我将服务器和客户端代码捆绑在一起，但是我无法使webpack-dev-server使用以下配置。

这是我的应用程序的结构：

.
├── dist
│   ├── assets
│   │   ├── bundle.js
│   │   ├── index.css
│   │   └── index.html
│   └── server.js
├── package.json
├── src
│   ├── client
│   │   ├── App.js
│   │   ├── components
│   │   ├── css
│   │   ├── index.html
│   │   ├── index.js
│   │   ├── libs
│   │   └── main.less
│   └── server
│       ├── App.js
│       ├── bin
│       ├── routes
│       └── views
└── webpack.config.js

这个想法是Webpack编译来自/src/client/app.js的代码并将其捆绑到/dist/assets/bundle.js; Webpack还在/src/server/app.js中编译服务器中的代码，并将其捆绑到/dist/server.js。

在package.json我有这个脚本：

"start": "concurrently \"npm run server\" \"npm run client\"",
"server": "node ./dist/server.js",
"client": "webpack-dev-server --mode development --open",
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"

还代理：

"proxy": "http://localhost:4000"

因此，对API的每个请求都将转到此端口，这是我的服务器所在的位置。在我的/src/server/app.js中，我设置了这样的公共文件：

app.use(express.static('dist'));

在我的webpack conf中我有这个：

需要：

const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals'); // Remove node_modules when creating the bundle
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var config = require('./config.test.json');

这捆绑了服务器：

module.exports = [

    {
        entry: './src/server/App.js',
        output: {
            filename: 'server.js',
            path: __dirname + '/dist',
            libraryTarget: 'commonjs2',
        },
        target: 'node',
        node: { console: false, global: false, process: false, Buffer: false, __filename: false, __dirname: false, },
        externals: nodeExternals(),
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: [/node_modules/, /\.less$/, /\.css$/],
                    use: {
                        loader: 'babel-loader',
                    },
                },
                { test: /\.json$/, },
                { test: /\.css$/, use: { loader: 'ignore-loader', }, },
                { test: /\.less$/, use: { loader: 'ignore-loader', },
                },
            ],
        },
    },

这捆绑客户端

    {
        entry: './src/client/index.js',
        output: {
            filename: 'bundle.js',
            path: __dirname + '/dist/assets',
        },
        devServer: { port: 3000, },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: { loader: 'babel-loader', },
                },
                {
                    test: /\.html$/,
                    use: [ { loader: 'html-loader', options: { minimize: true }, }, ],
                },
                {
                    test: /\.less$/,
                    use: [
                        { loader: MiniCssExtractPlugin.loader },
                        { loader: 'css-loader',
                            options: { modules: true, importLoaders: 1, localIdentName: '[name]-[hash:4]', sourceMap: true, minimize: true, }, },
                        { loader: 'less-loader' },
                    ],
                },
            ],
        },
        plugins: [
            new CleanWebpackPlugin(['dist/'], { watch: true }),
            new HtmlWebPackPlugin({ template: './src/client/index.html', filename: './index.html', }),
            new MiniCssExtractPlugin({ filename: 'index.css', chunkFilename: 'index.css',
            }),
        ],
    },
];

现在，如果我执行npm run build和npm run server，我将从localhost:3000的后端进行网站呈现，例如，提供来自localhost:4000/users的JSON请求。但如果我做npm run start我无法使其发挥作用。有没有人知道如何在这种情况下设置webpack-dev-server？

Webpack-dev-server，带有客户端和服务器捆绑

0 个答案: