root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Add webpack build to webpack guide

This commit is contained in:
Julien Déramond 2023-01-03 16:57:33 +01:00 committed by Mark Otto
parent da1c968965
commit 8546804325
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
site/content/docs/5.3/getting-started/webpack.md
View File

@ -81,6 +81,7 @@ With dependencies installed and our project folder ready for us to start coding,
const path = require('path') const path = require('path')
module.exports = { module.exports = {
mode: 'development',
entry: './src/js/main.js', entry: './src/js/main.js',
output: { output: {
filename: 'main.js', filename: 'main.js',
@ -116,13 +117,14 @@ 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. 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 dev 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. You can also add a `build` script shown below to build your project.
```json ```json
{ {
// ... // ...
"scripts": { "scripts": {
"start": "webpack serve --mode development", "start": "webpack serve",
"build": "webpack build",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
// ... // ...
@ -149,6 +151,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
const path = require('path') const path = require('path')
module.exports = { module.exports = {
mode: 'development',
entry: './src/js/main.js', entry: './src/js/main.js',
output: { output: {
filename: 'main.js', filename: 'main.js',
@ -165,12 +168,15 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
test: /\.(scss)$/, test: /\.(scss)$/,
use: [ use: [
{ {
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader' loader: 'style-loader'
}, },
{ {
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader' loader: 'css-loader'
}, },
{ {
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader', loader: 'postcss-loader',
options: { options: {
postcssOptions: { postcssOptions: {
@ -181,6 +187,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
} }
}, },
{ {
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader' loader: 'sass-loader'
} }
] ]