Let’s see how to get our styles - css and sass files - bundled in our webpack application package.
Webpack by itself only knows javascript, so when we want it to pack any other type of resources…
What if we have a multi-page app? Lets say, we have two html files — index.html and settings.html. index.html uses…
index.html
settings.html
In the last section, we ran the webpack command (on terminal or via npm script) with two arguments:
webpack
1. the entry point of our application for webpack to start bundling modules from and
So far we have been verifying our changes, that we made to our code locally on the system, by manually opening the…
In the previous section, we imported our my-helper-module in our app.js as below:
import * as helperModule from './my-helper-module.js'
We can add a resolve block in our webpack.config so that webpack can resolve and…
In the last lesson, we got our styles working all good; getting the css and scss files bundled and then getting the resulting css included within the <style> tags. While this is okay at this point of the beginning of the development phase while we have very little css , but as our css will…
During development, lets say you have your application opened in your browser window, and you have navigated to page or state of step 3 of some multi-step process when you realize that you need to change some style or some functionality of a module used in step 3.
In the previous lessons we saw how to use url-loader andfile-loader that allow webpack to bundle/pack images used in our web application. For webpack to know what images our application uses, we have to let webpack know of…
url-loader
file-loader
Webpack, with the help of its loaders and plugins, is a Module Bundler +…
loaders
plugins,
Now that we got webpack configured to package and bundle our js code in a single file -app.bundle.js, we need an index.html for our web app with a script tag havingsrc='app.bundle.js'.
app.bundle.js
src='app.bundle.js'
