Created
October 28, 2020 21:59
-
-
Save iosorin/abcd1da0bb43f9fdfce7675d57afa4dd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 1.init: npm init -y | |
| 2. react: yarn add react react-dom | |
| 3. babel: yarn add --dev @babel/preset-react (jsx support) @babel/core @babel/preset-env | |
| 4. babel: yarn add --dev babel-loader (transpile modern syntax to browser supportable) | |
| 4.1 babel: yarn add --dev @babel/plugin-proposal-class-properties | |
| 5. babel: .babelrc with installed presets and plugins | |
| 6. webpack: yarn add --dev webpack(module-bundler) webpack-cli(to run project from terminal) webpack-dev-server(serve content) | |
| 7. webpack plugins: html-webpack-plugin (generate html that includes webpack bundles in the body using script tag) | |
| 7.2 webpack plugins: clean-webpack-plugin (to clean dist folder after each build), copy-webpack-plugin (to copy file from source folder to dist) | |
| 8. folder structure: mkdir src && cd$_ , then touch index.js App.js index.html | |
| 9. folder structure: create base html markup for index.html with #root div, create base jsx markup for App.js (dont forget import react on page) and for index.js you need import ReactDOM from 'react-dom' and App component and render it inside root div (ReactDOM.render(<App/>, document.getElementById('root')) (dont forget import react on page) | |
| 10. webpack: create webpack.config.js with entry(index.js), output(dist), module:rules:(babel loader for .js and .jsx) and plugins (htmlwebpackplugin, clean-webpack-plugin) | |
| 11.1 package.json: yarn add --dev cross-env | |
| 11.2 package.json: add "start" in script (webpack serve) | |
| 12. styles: yarn add --dev sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass and mini-css-extract-plugin(for production) | |
| 13. styles(webpack): add loaders in module.rules (for /\.(scss|css)$/) | |
| 14. Some improves for dev and prod build (dev-server, mini-css): | |
| - touch webpack.commom, webpack.dev, webpack.prod | |
| - yarn add --dev webpack-merge | |
| - webpack plugins for prod: yarn add --dev mini-css-extract-plugin(extract css in separate files), optimize-css-assets-webpack-plugin(minimize css), terser-webpack-plugin(minimize js) | |
| -create public folder | |
| - replace at package.json scripts "start"(or dev) command with exact config to use - example: cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment