Skip to content

Commit

Permalink
Webpack: Make bash formatting in install statements consistent
Browse files Browse the repository at this point in the history
  • Loading branch information
softy-dev committed Oct 12, 2024
1 parent cc73262 commit 92d0055
Showing 1 changed file with 67 additions and 61 deletions.
128 changes: 67 additions & 61 deletions javascript/organizing_your_javascript_code/webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ This section contains a general overview of topics that you will learn in this l

In the previous lesson, we learned what an **entry point** is, what a **dependency graph** is, and how to add an entry point file to HTML as a module script. With bundling, the same concepts of entry points and dependency graphs apply: we provide the bundler with an entry point. It then builds a dependency graph from that file, combines all relevant files together, and then outputs a single file with all the necessary code included.

While it does this, we could also get it to do a whole bunch of other things, such as [minifying our code](https://en.wikipedia.org/wiki/Minification_(programming)), image optimizations, or even ["tree shaking"](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). Most of these extra optimizations are out of the scope of this course; we will instead be focusing on basic bundling of JavaScript, and handling HTML, CSS, and images.
While it does this, we could also get it to do a whole bunch of other things, such as [minifying our code](<https://en.wikipedia.org/wiki/Minification_(programming)>), image optimizations, or even ["tree shaking"](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). Most of these extra optimizations are out of the scope of this course; we will instead be focusing on basic bundling of JavaScript, and handling HTML, CSS, and images.

### Webpack

Expand Down Expand Up @@ -77,14 +77,14 @@ Inside our two JavaScript files, we'll have the following:

```javascript
// index.js
import { greeting } from "./greeting.js";
import { greeting } from './greeting.js';

console.log(greeting);
```

```javascript
// greeting.js
export const greeting = "Hello, Odinite!";
export const greeting = 'Hello, Odinite!';
```

Great, now we have an `index.js` that imports from, and so depends on, `greeting.js`. In order to bundle this, we'll also want a Webpack configuration file, which will contain all the details we need for bundling, such as the entry point, the output destination, and anything like plugins and loaders (which we will cover shortly).
Expand All @@ -93,14 +93,14 @@ Back in your project root (so outside of `src`), create a `webpack.config.js` fi

```javascript
// webpack.config.js
const path = require("path");
const path = require('path');

module.exports = {
mode: "development",
entry: "./src/index.js",
mode: 'development',
entry: './src/index.js',
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
Expand All @@ -116,7 +116,7 @@ You'll notice the exported object contains a few key sections:
- `filename`: The name of the output bundle - it can be anything you want.
- `path`: The path to the output directory, in this case, `dist`. If this directory doesn't already exist when we run Webpack, it will automatically create it for us as well. Don't worry too much about why we have the `path.resolve` part - this is just the way Webpack recommends we specify the output directory.
- `clean`: If we include this option and set it to `true`, then each time we run Webpack to bundle, it will empty the output directory first before bundling the files into it. This helps us keep `dist` clean, so it only contains the files produced by the most recent bundling.

With these files all in place, let's run Webpack and see what happens!

```bash
Expand All @@ -141,20 +141,20 @@ We should also create a `template.html` inside `src` (you can name this file wha

```javascript
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
mode: "development",
entry: "./src/index.js",
mode: 'development',
entry: './src/index.js',
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html",
template: './src/template.html',
}),
],
};
Expand All @@ -170,7 +170,7 @@ Let's see how we'd handle CSS.

### Loading CSS

We don't just need one new package for CSS, we need *two*. Gosh, what a greedy little thing... Let's install them.
We don't just need one new package for CSS, we need _two_. Gosh, what a greedy little thing... Let's install them.

```bash
npm install --save-dev style-loader css-loader
Expand All @@ -182,27 +182,27 @@ Back in our `webpack.config.js`, we need to add these loaders so Webpack knows w

```javascript
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
mode: "development",
entry: "./src/index.js",
mode: 'development',
entry: './src/index.js',
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html",
template: './src/template.html',
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
use: ['style-loader', 'css-loader'],
},
],
},
Expand Down Expand Up @@ -233,8 +233,8 @@ body {
You can now import your CSS file into one of your JavaScript files. `src/index.js` makes sense. We don't need anything from the imported CSS file itself. Since our CSS and style loaders will handle all of that for us, we can just use a [side effect import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only).

```javascript
import "./styles.css";
import { greeting } from "./greeting.js";
import './styles.css';
import { greeting } from './greeting.js';

console.log(greeting);
```
Expand All @@ -259,14 +259,20 @@ There are three different ways you could be dealing with local image files:

1. **Image files we reference in our HTML template, e.g. as the `src` of an `<img>`**

We need to install and tell Webpack to use something called `html-loader`, which will detect image file paths in our HTML template and load the right image files for us. Without this, `./odin.png` would just be a bit of text that will no longer reference the correct file once we run Webpack to build into `dist`. We can install it with `npm install --save-dev html-loader`, then add the following object to the `modules.rules` array within `webpack.config.js`:
We need to install and tell Webpack to use something called `html-loader`, which will detect image file paths in our HTML template and load the right image files for us. Without this, `./odin.png` would just be a bit of text that will no longer reference the correct file once we run Webpack to build into `dist`. Let's install it:

```javascript
{
test: /\.html$/i,
loader: "html-loader",
}
```
```bash
npm install --save-dev html-loader
```

Then add the following object to the `modules.rules` array within `webpack.config.js`:

```javascript
{
test: /\.html$/i,
loader: "html-loader",
}
```

1. **Images we use in our JavaScript, where we will need to import the files**

Expand All @@ -284,11 +290,11 @@ There are three different ways you could be dealing with local image files:
Then, in whatever JavaScript module we want to use that image in, we just have to default import it.

```javascript
import odinImage from "./odin.png";
const image = document.createElement("img");
import odinImage from './odin.png';

const image = document.createElement('img');
image.src = odinImage;

document.body.appendChild(image);
```

Expand All @@ -298,35 +304,35 @@ After all that, if we added both `html-loader` and the image `asset/resource` ru

```javascript
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
mode: "development",
entry: "./src/index.js",
mode: 'development',
entry: './src/index.js',
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html",
template: './src/template.html',
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
use: ['style-loader', 'css-loader'],
},
{
test: /\.html$/i,
loader: "html-loader",
loader: 'html-loader',
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
type: 'asset/resource',
},
],
},
Expand Down Expand Up @@ -361,39 +367,39 @@ Once installed, in our `webpack.config.js`, we only need to add a couple more pr

```javascript
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
mode: "development",
entry: "./src/index.js",
mode: 'development',
entry: './src/index.js',
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
devtool: "eval-source-map",
devtool: 'eval-source-map',
devServer: {
watchFiles: ["./src/template.html"],
watchFiles: ['./src/template.html'],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html",
template: './src/template.html',
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
use: ['style-loader', 'css-loader'],
},
{
test: /\.html$/i,
loader: "html-loader",
loader: 'html-loader',
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
type: 'asset/resource',
},
],
},
Expand All @@ -410,7 +416,7 @@ Once set up, `npx webpack serve` will host our web page on `http://localhost:808

<div class="lesson-note" markdown="1">

Note that the webpack-dev-server only reads your webpack configuration when you start it. If you change the webpack config file while the dev server is running, it will not reflect those config changes. Use <kbd>Ctrl</kbd> + <kbd>C</kbd> in the terminal to kill it then rerun `npx webpack serve` to apply the new config.
Note that the webpack-dev-server only reads your webpack configuration when you start it. If you change the webpack config file while the dev server is running, it will not reflect those config changes. Use <kbd>Ctrl</kbd> + <kbd>C</kbd> in the terminal to kill it then rerun `npx webpack serve` to apply the new config.

</div>

Expand Down

0 comments on commit 92d0055

Please sign in to comment.