-
Notifications
You must be signed in to change notification settings - Fork 0
Sreilys/express-ssr-hbs-webpack
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
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
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published