Custom built webpack v4 react build setup
nvm use
npm i
npm run dev
will auto open http://localhost:9000 to simple react app in browser hot reloads
webpack from scratch (using v4 of webpack per tutorial..latest is v5) https://webpack.js.org/concepts/
why not webpack v5? simple the course is v4 so I followed that. But a next step is to configure a webpack v5 setup.
npm init
git init
npm install --save-dev webpack webpack-cli
webpack is now installed in node_modules/.bin/ and you can run as node_modules/.bin/webpack and it will generate js output file in /dist (because it has default) which you can run as node /dist/main.js
to make it easier when you add a script to package.json, it will resolve to node_modules
webpack runs in production mode by default so can pass params to run in development mode
npm run build -- --mode development
when run in development mode the webpack runtime is included and it builds a data struct of each src file
webpack.config.js - file for webpack to pickup
- entry - starting file for code
- output - path and filename to output
babel is a compiler used to convert modern js down to a format which runs in older browsers
npm i -D @babel/core @babel/cli @babel/preset-env
this also puts an executable in node_modules/.bin which you can run like so $(npm bin)/babel ./src/greet.js ...which just outputs the same code
but run using preset $(npm bin)/babel ./src/greet.js --presets=@babel/preset-env and it down converts modern js to older code
used to transform modern js code into older js
added options in module property to use babel-loader
now we have build setup to run & build plain javascript ^
install babel react preset: npm i -D @babel/preset-react
add preset to loader list in webpack.config
add simple React component and use in index.js
run npm run build and now we see /dist/app.bundle.js contains react and our simple app
add webpack-html-plugin to include an html file npm i -D html-webpack-plugin
generates html file by default but missing the div for the react app
created custom index.html template in src to include div for react app and edited webpack.config.js to pass the template name as a param to HtmlWebpackPlugin ctor
added a script to package.json "dev": "webpack --watch --mode development"
now npm run dev runs in watch mode and rebuilds when code changes
add webpack-merge npm i -D webpack-merge
create base, prod and dev webpack config files (prod and dev "inherit base")
change package.json scripts to pass config to use e.g. "build": "webpack --config webpack.config.prod.js",
npm i -D webpack-dev-server
change package.json to run webpack-dev-server instead of webpack-config
- added --open option to auto open when run dev
- changed port to 9000
npm run dev will now run app on http://localhost:9000/ and auto open and it live reloads when make changes in the app!
the code running in the browser is the converted code which is not the same as the code I wrote, sourcemaps will map the converted code back to the original code so what I debug is what I wrote
add devtool: 'source-map' option to webpack.config.dev.js and rerun the app with chrome debugger open
npm i -D @babel/plugin-proposal-class-properties which adds support for proposed class changes
change webpack.config.base.js as a plugin
this is for example, we don't use classes for react, functional ftw...right? eh?
add style and css loaders to auto add a styles tag in the html
npm i -D css-loader style-loader
npm i -S react-hot-loader
changed App.js to use like docs: https://github.com/gaearon/react-hot-loader
and added new npm script command in package.json
npm i -D webpack-bundle-analyzer
change webpack prod config to use
see https://github.com/webpack-contrib/webpack-bundle-analyzer
to use: npm run build and open dist/bundle_sizes.html