The prod webpack doesn't generate an html file
joe-at-startupmedia opened this issue · 1 comments
joe-at-startupmedia commented
The production webpack file doesn't generate an html file. Strangely enough, the development webpack does. I'm trying to generate a static distributable that doesn't require webpack dev server or node to run this project as is. This is where I got so far which produces a further error indicating that react-dom is not loaded properly.
+++ b/webpack/prod.config.js
@@ -1,4 +1,5 @@
const path = require('path');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const webpack = require('webpack');
@@ -6,25 +7,25 @@ module.exports = {
mode: 'production',
target: 'web',
entry: {
- 'index': './src/Isoflow.tsx',
+ 'index': './src/index.tsx',
'/standaloneExports': './src/standaloneExports.ts',
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
- libraryTarget: 'commonjs2'
+ libraryTarget: 'umd'
},
externals: {
react: {
commonjs: 'react',
commonjs2: 'react',
- amd: 'React',
+ amd: 'react',
root: 'React'
},
'react-dom': {
commonjs: 'react-dom',
commonjs2: 'react-dom',
- amd: 'ReactDOM',
+ amd: 'react-dom',
root: 'ReactDOM'
}
},
@@ -46,6 +47,9 @@ module.exports = {
]
},
plugins: [
+ new HtmlWebPackPlugin({
+ template: path.resolve(__dirname, '../src/index.html')
+ }),
index.js:2 Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')
joe-at-startupmedia commented
This solved it. I'm not sure if completely removing externals, getting rid of standaloneExports entry or switching the libraryTarget, but I don't have anymore time to troubleshoot which of these fixed it.
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: 'production',
target: 'web',
entry: {
'index': './src/index.tsx',
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.svg$/,
type: 'asset/inline'
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, '../src/index.html')
}),
new webpack.DefinePlugin({
PACKAGE_VERSION: JSON.stringify(require("../package.json").version),
REPOSITORY_URL: JSON.stringify(require("../package.json").repository.url),
})
],
resolve: {
extensions: ['.tsx', '.ts', '.js'],
plugins: [new TsconfigPathsPlugin()]
}
};