npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
npm install --save-dev html-webpack-plugin
mkdir public
mkdir src
cat> webpack.config.js<< EOF
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
clean: false, // or true
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)\$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: false, // or true
port: 3000,
open: true,
},
mode: 'development',
devtool: false // real code without eval func
};
EOF
cat > .babelrc << EOF
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
EOF
cat > public/index.html << EOF
React Webpack App
EOF
cat> src/index.jsx < {
return Hello React with Webpack!
;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
EOF
npm pkg set scripts.start="webpack serve --mode development"
npm pkg set scripts.build="webpack --mode production"
npm start
# see resulting bundle.js in chrome devtool