Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/content/concepts/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -112,14 +112,14 @@ export default {
filename: "my-first-webpack.bundle.js",
},
module: {
rules: [{ test: /\.txt$/, use: "raw-loader" }],
rules: [{ test: /\.css$/, use: "css-loader" }],
},
};
```

The configuration above has defined a `rules` property for a single module with two required properties: `test` and `use`. This tells webpack's compiler the following:

> "Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a `require()`/`import` statement, **use** the `raw-loader` to transform it before you add it to the bundle."
> "Hey webpack compiler, when you come across a path that resolves to a '.css' file inside of a `require()`/`import` statement, **use** the `css-loader` to transform it before you add it to the bundle."

W> It is important to remember that when defining rules in your webpack config, you are defining them under `module.rules` and not `rules`. For your benefit, webpack will warn you if this is done incorrectly.

Expand All @@ -143,7 +143,7 @@ import webpack from "webpack"; // to access built-in plugins

export default {
module: {
rules: [{ test: /\.txt$/, use: "raw-loader" }],
rules: [{ test: /\.css$/, use: "css-loader" }],
},
plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};
Expand Down
Loading