Как упаковать многостраничный (tsx) веб-сайт с отдельными js-файлами? - PullRequest
0 голосов
/ 22 мая 2018

Я использую:

react для рендеринга страницы.

typescript напрямую (без вавилона), транслируя tsx в ES5 для браузеров

webpack для генерации кодов отдельно

babel-polyfill для упаковки в vendor.js, но без ссылки на коды машинописи

Я хочу упаковать библиотеки JavaScript и мои общие коды в одноvendor.js и генерировать отдельно [name].js файлов с [name].html (с шаблоном), ссылающихся на vendor.js и [name].js для каждого [name].tsx (который содержит только классопределение [name], которое расширяется React.Component<P,S>) на HtmlWebpackPlugin.

[name].tsx может импортировать модули.Модули, включенные в vendor.js , не могут быть включены в [name].js, а остальные обычно должны включаться в [name].js

Я прочитал форму документа webpack на официальном сайте и до сих порпонятия не имею, как это сделать.

Я нашел несколько руководств, которые реализуют многостраничный веб-сайт, но все библиотеки включены в отдельные файлы [name].js, что означает, что библиотеки javascript избыточно включены в каждый [name].js и это, конечно, не ожидается.

И я нашел несколько руководств по поводу externals, но его можно использовать только для существующих файлов js, а не для сгенерированных файлов комплектов.

Вот мойcurrent webpack.config.js, который поддерживает только одну страницу:

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

module.exports = {
    entry: {
        "index.js": ['babel-polyfill', './src/index.tsx']
    },
    output: { filename: '[name]' },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    module: {
        rules: [{
            test: /\.(ts|tsx)$/,
            loader: 'ts-loader',
            exclude: '/node_modules/'
        }, {
            enforce: 'pre',
            test: /\.js$/,
            loader: 'source-map-loader'
        },]
    },
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.tsx']
    },
    devtool: "source-map"
} 

Есть ли способ заставить его поддерживать несколько страниц, как описано?

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