Skip to content

Commit 8546804

Browse files
julien-deramondmdo
authored andcommitted
Add webpack build to webpack guide
1 parent da1c968 commit 8546804

File tree

1 file changed

+9
-2
lines changed

1 file changed

+9
-2
lines changed

site/content/docs/5.3/getting-started/webpack.md

+9-2
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ With dependencies installed and our project folder ready for us to start coding,
8181
const path = require('path')
8282

8383
module.exports = {
84+
mode: 'development',
8485
entry: './src/js/main.js',
8586
output: {
8687
filename: 'main.js',
@@ -116,13 +117,14 @@ With dependencies installed and our project folder ready for us to start coding,
116117

117118
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.
118119

119-
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.
120+
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.
120121

121122
```json
122123
{
123124
// ...
124125
"scripts": {
125-
"start": "webpack serve --mode development",
126+
"start": "webpack serve",
127+
"build": "webpack build",
126128
"test": "echo \"Error: no test specified\" && exit 1"
127129
},
128130
// ...
@@ -149,6 +151,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
149151
const path = require('path')
150152

151153
module.exports = {
154+
mode: 'development',
152155
entry: './src/js/main.js',
153156
output: {
154157
filename: 'main.js',
@@ -165,12 +168,15 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
165168
test: /\.(scss)$/,
166169
use: [
167170
{
171+
// Adds CSS to the DOM by injecting a `<style>` tag
168172
loader: 'style-loader'
169173
},
170174
{
175+
// Interprets `@import` and `url()` like `import/require()` and will resolve them
171176
loader: 'css-loader'
172177
},
173178
{
179+
// Loader for webpack to process CSS with PostCSS
174180
loader: 'postcss-loader',
175181
options: {
176182
postcssOptions: {
@@ -181,6 +187,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
181187
}
182188
},
183189
{
190+
// Loads a SASS/SCSS file and compiles it to CSS
184191
loader: 'sass-loader'
185192
}
186193
]

0 commit comments

Comments
 (0)