https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
npm install -g npm@next
- if
npx
isn't found install that globally too:npm install -g npx
(wasn't present on my Azure app service VM even though node & npm were current)
npm init -u
npm install --save-dev webpack webpack-cli
npm install --save react react-dom react-redux rxjs
npm install --save-dev @types/react @types/react-dom @types/react-redux
npm install --save-dev typescript awesome-typescript-loader source-map-loader
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}
module.exports = {
mode: "production",
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx"]
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "awesome-typescript-loader"
}
]
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
npx webpack --mode development
npm i local-web-server -g
ws --spa index.html
see https://github.com/lwsjs/local-web-server/wiki/CLI-usage