Webpack-dev-server с комплектацией клиента и сервера - PullRequest
Новая
       11

Webpack-dev-server с комплектацией клиента и сервера

0 голосов
/ 25 апреля 2018

Я занимаюсь разработкой приложения 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'));

И в моем веб-пакете 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например, обслуживая запросы JSON от localhost:4000/users.Но если я сделаю npm run start, я не смогу заставить это работать.У кого-нибудь есть идеи как установить webpack-dev-server в этой ситуации?

...