rewrite some pieces

twbs · May 20, 2022 · 98c2326 · 98c2326
1 parent 1f19a4a
commit 98c2326
Showing 1 changed file with 20 additions and 6 deletions.
diff --git a/site/content/docs/5.2/getting-started/webpack.md b/site/content/docs/5.2/getting-started/webpack.md
@@ -38,7 +38,7 @@ We're building a Webpack project with Bootstrap from scratch, so there are some
 4. **Install additional dependencies.** In addition to Webpack and Bootstrap, we need a few more dependencies to properly import and bundle Bootstrap's CSS and JS with Webpack. These include Sass, some loaders, and Autoprefixer.
 
    ```sh
-   npm i --save-dev autoprefixer css-loader export-loader postcss-loader sass sass-loader style-loader
+   npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
    ```
 
 Now that we have all the necessary dependencies installed and setup, we can get to work creating the project files and importing Bootstrap.
@@ -116,7 +116,7 @@ With dependencies installed and our project folder ready for us to start coding,
 
    We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Webpack.
 
-3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack development server.
+3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server.
 
    ```json
    {
@@ -143,7 +143,7 @@ In the next and final section to this guide, we'll setup the Webpack loaders and
 
 Importing Bootstrap into Webpack requires the loaders we installed in the first section. We've installed them with npm, but now Webpack needs to be configured to use them.
 
-1. **Setup the loaders in `webpack.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part is the `module` section.
+1. **Setup the loaders in `webpack.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `module` section.
 
    ```js
    const path = require('path')
@@ -192,13 +192,16 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
 
    Here's a recap of why we need all these loaders. `style-loader` injects the CSS into a `<style>` element in the `<head>` of the HTML page, `css-loader` helps with using `@import` and `url()`, `postcss-loader` is required for Autoprefixer, and `sass-loader` allows us to use Sass.
 
-2. **Now, let's import Bootstrap's CSS and JS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
+2. **Now, let's import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
 
    ```scss
+   // Import all of Bootstrap's CSS
    @import "~bootstrap/scss/bootstrap";
    ```
 
-   And then add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
+   *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
+
+3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
 
    <!-- eslint-skip -->
    ```js
@@ -209,7 +212,18 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
    import * as bootstrap from 'bootstrap'
    ```
 
-3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+   You can also import JavaScript plugins individually as needed to keep bundle sizes down:
+
+   ```js
+   import Alert from 'bootstrap/js/dist/alert';
+
+   // or, specify which plugins you need:
+   import { Tooltip, Toast, Popover } from 'bootstrap';
+   ```
+
+   *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
+
+4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">