Senior Front-End Developer
As a Node-based application, Webpack needs both Node and npm (node package manager) to run.
sudo npm install -g
Sudo and -g means that you install the node package globally on your computer as the administrator. It will ask for your computer’s password.
3. Then run:
You will walk through the process of creating a package.json file. The default settings are alright, so just keep pressing enter. You can always change this later.
When the package.json is created you will see a little document of data. This is where we tell the project everything it needs to know about itself.
To add Webpack to the project, run:
npm install webpack -D
This gets 3 things to happen:
Add the following scripts to package.json:
"start": "webpack --watch"
This makes it possible to run the project’s Webpack version through npm by running npm run build and npm run start in the command line.
According to the Webpack documentation, a global webpack installation is not recommended because it locks you down to a specific version of Webpack and might fail in projects that use a different version.
Notice that we don’t include the src/app.js that we just created, but dist/bundle.js. This file actually doesn’t exist yet. It’s what Webpack’s going to create for us.
You can change the names to whatever you prefer, as long as they are in sync between webpack.config.js, files, folders and the linked script in the HTML.
Now, let’s create some code for Webpack to work with.
console.log('This is rainbows.js')
6. Add the following to app.js to import rainbows.js and unicorns.js
7. Start webpack in Terminal by running:
npm run build
Now the dist folder has arrived!
When you open index.html in a browser, open Developer Tools and look in the console. You will see that it shows the console messages from both rainbows.js and unicorns.js.
4. Add the following to src/app.js to import our base.scss:
To get Webpack to read this sass styling, we need some extra loaders.
npm install style-loader css-loader sass-loader node-sass extract-text-webpack-plugin -D
2. Add Extract Text Plugin to the top of your webpack.config.js. This moves the CSS inside a separate file.
const ExtractTextPlugin = require('extract-text-webpack-plugin');
3. Now we’re going to tell Webpack to look for .scss-files. Webpack will then run them through Extract Text plugin and the CSS- and Sass-loader. Paste this right after output’s closing curly bracket. Remember the comma:
use: ['css-loader', 'sass-loader']
4. We also need to refer to the Extract Text Plugin right before the last curly bracket. This will tell Webpack that we would like it to pack all the CSS into a separate file and call it style.css.
Your webpack.config.js should now look something like this:
<link rel='stylesheet' href='dist/style.css'>
2. Run Webpack in Terminal:
npm run build
3. Open index.html in a browser. If it has a pink background color it means the CSS is included.
4. By using the webpack watch command we added to the npm scripts in the beginning, you don’t have to run it every time you make a change. Webpack will reload automatically when you save in the editor:
npm run start
5. Now make a change in base.scss, for example:
6. Refresh the browser window. The background should now be orange.
3. Go to src/app.js and import the typography.scss:
4. Refresh the browser. Is the typography different now? Then it works! ✨
Thank you for reading! I hope you learned something, I certainly did! There are countless boilerplates for this setup out there. However, in my experience it’s rewarding to gain some understanding of how the environment actually works. In this way, you include only what you actually need and you see how it all works together.
Webpack can look complicated, but isn’t actually that hard when you pick it apart. Concentrate on one thing at a time. It gives wonderful opportunities to experiment and add powerful features to a project.
Create your free account to unlock your custom reading experience.