webpack ts react boilerplate
This post was migrated from Tistory. You can find the original here.
https://ryuhojin.tistory.com/19
[[ReactJS] React + TypeScript + Webpack5 initial setup (fully updated for React 18)
[2022-10-06: 2nd update] The boilerplate’s project structure has been changed along with a few configuration tweaks. Please take a look. I’ll keep working on delivering a better starter kit. Today, without using CRA…
ryuhojin.tistory.com](https://ryuhojin.tistory.com/19)
Building on top of the webpack5 boilerplate from the author of the post above.
1
2
3
4
5
//webpack.common.js
new webpack.ProvidePlugin({
React: "react",
process: 'process/browser.js', //added
}),
Added this to fix the “process not found” error, and
1
2
3
4
5
6
7
8
//webpack.dev.js
const Dotenv = require('dotenv-webpack');
module.exports = merge(common, {
...
plugins: [
new Dotenv({ path: ".env" }), //added
]
});
set it up so dev picks up .env, and
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Dotenv = require('dotenv-webpack');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = merge(common, {
...
plugins: [
new MiniCssExtractPlugin(),
new Dotenv({ path: ".env.production" }), //added
new CopyPlugin({ //added
patterns: [{ from: "public/static", to: "static" }],
})
],
...
});
configured production to pick up .env.production, and
for static sources, installed copy-webpack-plugin and added a step to copy the public/static folder over to dist/static.