Несколько поддоменов + точки входа в приложение React - PullRequest
Новая
       0

Несколько поддоменов + точки входа в приложение React

0 голосов
/ 19 апреля 2020

Я создаю веб-приложение, используя React, TypeScript, Ant Design и mobX. Я использовал это как шаблон .

Я создаю что-то, что я хотел бы построить на двух поддоменах, один для клиентов (www.my-app-name.com) и один для администраторов (admin.my- app-name.com).

Я не хочу создавать целый другой проект для стороны администратора, так как есть много кода, который нужно скопировать, и я не хочу делать который. У меня есть несколько вопросов:

  1. Способ к go, создание нескольких точек входа с помощью Webpack? Если да, то как? а затем, как бы я изменил сценарии в пакете. json на start и build эти два "сайта"

  2. Я размещаю приложение на Google App Engine, является можно разместить несколько поддоменов, используя разные папки сборки, которые будут созданы из моего предыдущего вопроса?

Вот мой файл webpack.config. js: 

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = () => {
    const prod = process.env.NODE_ENV === 'production';
    const styleLoader = (loaders = []) => [
        prod ? MiniCssExtractPlugin.loader : 'style-loader',
        'css-loader',
        ...loaders
    ];

    return {
        mode: prod ? 'production' : 'development',
        devtool: prod ? 'source-map' : 'cheap-module-eval-source-map',
        entry: './src/index.tsx',
        output: {
            path: path.resolve('./build'),
            filename: prod ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
            publicPath: ''
        },
        module: {
            rules: [
                {
                    test: /\.(jsx?|tsx?)$/,
                    exclude: /node_modules/,
                    use: 'babel-loader'
                },
                {
                    test: /\.css$/,
                    use: styleLoader()
                },
                {
                    test: /\.scss$/,
                    use: styleLoader([
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: require('sass')
                            }
                        }
                    ])
                },
                {
                    test: /\.svg$/,
                    loader: 'url-loader'
                },
                {
                    test: /\.png$/,
                    loader: 'url-loader'
                },
                {
                    test: /\.jpg$/,
                    loader: 'url-loader'
                },
                {
                    test: /\.less$/,
                    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }]
                },
                {
                    test: /\.ico$/,
                    loader: 'file-loader'
                },
                {
                    test: /\.mjs$/,
                    include: /node_modules/,
                    type: 'javascript/auto'
                }
            ]
        },
        resolve: {
            modules: ['node_modules', 'src'],
            extensions: ['.ts', '.tsx', '.js', '.jsx', '.wasm', '.mjs', '.json']
        },
        devServer: {
            contentBase: './',
            disableHostCheck: true,
            // host: "0.0.0.0",
            // useLocalIp: true,
            open: 'Google Chrome',
            hot: true,
            publicPath: '/',
            historyApiFallback: true
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html'
            }),
            new webpack.EnvironmentPlugin({
                ...process.env
            }),
            prod &&
                new MiniCssExtractPlugin({
                    filename: 'css/[name].[contenthash:8].css'
                })
        ].filter(Boolean)
    };
};

и мой пакет. json файл: 

{
    "name": "my-app-name",
    "version": "0.1.0",
    "scripts": {
        "start": "NODE_ENV=development webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback",
        "build": "NODE_ENV=production webpack",
        "git-push": "git add . && git commit && git push"
    },
    "dependencies": {
        "@ant-design/icons": "^4.0.5",
        "@types/node": "^13.11.1",
        "antd": "^4.1.1",
        "antd-password-input-strength": "^1.1.1",
        "aws-amplify": "^3.0.7",
        "ev-ui": "^0.4.2",
        "json2typescript": "^1.2.5",
        "less": "^3.11.1",
        "less-loader": "^5.0.0",
        "mobx": "^5.10.0",
        "mobx-react": "^6.0.3",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-router-dom": "^5.0.1",
        "sass": "^1.22.1",
        "sass-loader": "^7.1.0",
        "styled-components": "^4.2.1"
    },
    "devDependencies": {
        "@babel/core": "^7.4.5",
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "@babel/plugin-proposal-decorators": "^7.4.4",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-react": "^7.0.0",
        "@babel/preset-typescript": "^7.3.3",
        "@types/react": "^16.8.19",
        "@types/react-dom": "^16.8.4",
        "@types/react-router-dom": "^4.3.3",
        "@types/styled-components": "^4.1.16",
        "babel-loader": "^8.0.6",
        "babel-plugin-import": "^1.12.0",
        "css-loader": "2.1.1",
        "file-loader": "3.0.1",
        "html-webpack-plugin": "3.2.0",
        "mini-css-extract-plugin": "^0.7.0",
        "postcss-loader": "^3.0.0",
        "postcss-scss": "^2.0.0",
        "style-loader": "^1.1.3",
        "ts-loader": "^6.0.2",
        "typescript": "^3.5.1",
        "url-loader": "1.1.2",
        "webpack": "4.33.0",
        "webpack-cli": "^3.2.2",
        "webpack-dev-server": "3.5.1"
    }
}

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

Вы можете достичь вышеуказанного, используя два возможных подхода

  1. Используя несколько точек входа 
return {
        mode: prod ? 'production' : 'development',
        devtool: prod ? 'source-map' : 'cheap-module-eval-source-map',
        entry: { main: './src/index.tsx', admin: './src/admin.tsx' },
        output: {
            path: path.resolve('./build'),
            filename: prod ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
            publicPath: ''
        },
        ...
}
Второе решение состоит в том, чтобы фактически поддерживать общую конфигурацию веб-пакета и две отдельные конфигурации веб-пакета, в которых вы объединяете общую конфигурацию и переопределяете существующие конфигурации ввода и вывода. Таким образом, вы можете создать две папки для сборки и использовать отдельную конфигурацию webpack при запуске командных сценариев, настроенных в пакете. json

webpack.main. js

const Merge = require('webpack-merge');
const CommonConfig = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = Merge(CommonConfig, {
    entry: {
        app: './src/index.tsx',
    },
    output: {
            path: path.resolve('./build'),
            filename: prod ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
            publicPath: ''
    },
});

webpack.admin. js

const Merge = require('webpack-merge');
const CommonConfig = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = Merge(CommonConfig, {
    entry: {
        app: './src/admin.tsx',
    },
    output: {
            path: path.resolve('./admin'),
            filename: prod ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
            publicPath: ''
    },
});

webpack.common. js

// Это будет ваша текущая конфигурация webpack

Как только вы сделаете выше, вы можете использовать webpack.admin.js для создания админки

0 голосов
/ 19 апреля 2020

Да, вы можете создать несколько точек входа в одном файле webpack.config. js

  entry: {
    entry1: './src/index1.tsx',
    entry2: './src/index2.tsx',
  },
  output: {
     path: path.resolve('./build'),
     filename: prod ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
  },

Это создаст два файла в папке build / js, один с именем entry1. js и другие записи2. js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...