Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webpack: Emphasise need for --config if no webpack.config.js (e.g. webpack-merge) #26552

Merged
merged 1 commit into from
Nov 4, 2023
Merged

Webpack: Emphasise need for --config if no webpack.config.js (e.g. webpack-merge) #26552

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions javascript/organizing_your_javascript_code/webpack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
1. Note that if you decide to use `webpack-dev-server`, the tutorial example sets it to serve from `dist`. If you are using `html-webpack-plugin`, you will want to change this to serve from `src` instead. This will make development much easier as all of your work and any file paths you use can be kept within `src` (Webpack will adjust all of these file paths when bundling if you set the correct loaders and asset rules).
2. You can ignore the last option on `webpack-dev-middleware` as we will not be working with our own Express server for this part of the course.
4. Setting our webpack configuration to development mode is naturally most suitable for our development work, but when we come to build our projects for deployment (production), the dedicated production mode optimises this for us. Instead of manually switching between modes in the configuration file as needed, [this tutorial](https://webpack.js.org/guides/production/) introduces `webpack-merge`. This can be quite useful as a quick setup can allow us to have a dedicated npm script for development builds/dev server, and another specifically for our production build.
1. You'll notice the above tutorial does not have a `webpack.config.js` file. If you do use `webpack-merge`, make sure that any webpack commands you run (including in an npm script) follow the tutorial and use the `--config` option to specify which webpack configuration file to use. If you do not specify one, webpack will try to look for `webpack.config.js` and if it does not find one, it will not be able to bundle correctly!
5. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!

</div>
Expand Down