-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.txt
41 lines (35 loc) · 2.5 KB
/
README.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Todos:
- css compile
- lint
- test
- template cache
Notes:
react --> React package
react-dom --> it enables us to use react for the browser
babel-core -> Babel compiler core
babel-loader -> This package allows transpiling JavaScript files using Babel and webpack.
babel-preset-env --> A Babel preset that compiles es2015 down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.
babel-preset-react --> Babel preset for all React plugins.
sass-loader -> Loads a SASS/SCSS file and compiles it to CSS.
node-sass -> Node-sass is a library that provides binding for Node.js to LibSass
It allows you to natively compile .scss files to css at incredible speed.
style-loader -> Adds CSS to the DOM by injecting a <style> tag // It's recommended to combine style-loader with the css-loader
css-loader --> The css-loader interprets @import and url() like import/require() and will resolve them.
webpack --> webpack package
webpack-dev-server -> development server for webpack
normalize.css -> different browser have their various default stlyling this package helps reset all browser default styling
The webpack exports an object which is the configuration for our app. I will be explaining some core concepts here:
Entry --> This is the path to our src folder which is the entry point
Output --> Is an Object of two properties path(path for the out file) fileName('bundle.js' name of the generated file)
rules --> takes an array of rules
loader --> specify a loader to use when a the extension provided in the test is match which is either js, jsx, scss, css
exclude -> specifies what to exclude when search for modules
use -> takes in an array of loader
devtool -> specifies a development tool in our case the 'cheap-module-eval-source-map' makes debuging easier for us by show us the error on the exact line in the exact file, without this errors are reference in the bundle.js.
devServer --> is an object of property contentBase which specifies where we want to serve our files from to the browser
watch -> reloads the server on changes to file in our app which makes the browser to automatically reloads
Note: changes to the webpack.config.js file are not watch, meaning you have to restart your server
Useful articles:
https://blog.cloudboost.io/bundling-your-assets-with-webpack-756677e04369
https://medium.com/@binyamin/creating-a-node-express-webpack-app-with-dev-and-prod-builds-a4962ce51334
https://medium.com/@johnstew/webpack-hmr-with-express-app-76ef42dbac17