Я использую:
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"
}
Есть ли способ заставить его поддерживать несколько страниц, как описано?