From 49b8d72e0011708eaf9e4fcf78fcb4fb47b66caa Mon Sep 17 00:00:00 2001 From: Charles Roelli Date: Wed, 15 Jun 2022 21:02:54 +0200 Subject: [PATCH 1/3] Webpack: explain how to extract CSS from bundle --- .../docs/5.2/getting-started/webpack.md | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/site/content/docs/5.2/getting-started/webpack.md b/site/content/docs/5.2/getting-started/webpack.md index e45df81e5d1b..423dab2e5f5f 100644 --- a/site/content/docs/5.2/getting-started/webpack.md +++ b/site/content/docs/5.2/getting-started/webpack.md @@ -229,6 +229,68 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first Now you can start adding any Bootstrap components you want to use. Be sure to [checkout the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need. +## Production optimizations +The following headings describe some security and speed optimizations useful for running the project in production. Note that these optimizations are not applied on [the Webpack example project](https://github.com/twbs/examples/tree/main/webpack). + +### Extracting CSS into a separate file + +The `style-loader` we configured above conveniently emits CSS into the bundle so that manually loading a CSS file in `dist/index.html` is not necessary. This approach may not work with a strict Content Security Policy, however, and it may become a bottleneck in your application due to the large bundle size. + +To separate the CSS so that we can load it directly from `dist/index.html`, we will use the Webpack plugin `mini-css-extract-loader`. + +First, install the plugin. +```sh +npm install --save-dev mini-css-extract-plugin +``` + +Then instantiate and use the plugin in the Webpack configuration. +```diff +--- a/webpack/webpack.config.js ++++ b/webpack/webpack.config.js +@@ -1,8 +1,10 @@ ++const miniCssExtractPlugin = require('mini-css-extract-plugin') + const path = require('path') + + module.exports = { + mode: 'development', + entry: './src/js/main.js', ++ plugins: [new miniCssExtractPlugin()], + output: { + filename: "main.js", + path: path.resolve(__dirname, "dist"), +@@ -18,8 +20,8 @@ module.exports = { + test: /\.(scss)$/, + use: [ + { +- // Adds CSS to the DOM by injecting a `