Scaffolding your project with Webpack

In this section, we'll set up NPM as a bundler.

Installing dependencies from NPM

First, we need to install Webpack and other NPM modules. Use the following command:

$ npm install --save-dev \
    webpack@4 \
    webpack-cli@3 \
    webpack-dev-server@3 \
    svelte@3 \
    svelte-loader@2 \
    css-loader@3 \
    style-loader@1 \
    [email protected] \
    dotenv-webpack@1 \
    cross-env@7

This command installs the preceding modules and adds them to the package.json file as devDependency, because they are required to build the web application but are not used at runtime. These modules are required only for the bundler, and after you're done scaffolding the project, you won't have to worry about them anymore.

Let's take a look at what they do:

• webpack, webpack-cli, and webpack-dev-server are the three modules required to run Webpack and the built-in web server for development.
• svelte and svelte-loader are the Svelte framework and compiler, and the loader that enables Webpack to interpret Svelte files.
• css-loader, style-loader, and mini-css-extract-plugin are required to work with CSS styles.
• dotenv-webpack is a plugin that allows us to define environmental variables with a dotenv file, which we'll use for the sample app.
• Lastly, cross-env is a utility that allows us to write NPM scripts that work on shells across all operating systems.

Configuring NPM scripts

Next, let's add a set of scripts to our package.json file so as to automate running development and production builds. In that file, we will only change the scripts dictionary, replacing it with the following:

package.json (fragment)

"scripts": {
  "build": "cross-env NODE_ENV=production webpack",
  "dev": "webpack-dev-server --content-base public"
},  

We'll explore these scripts and their purpose in the next section of this chapter.

Configuring Webpack

Lastly, we need to create a configuration file for Webpack. This is a fairly long document, so you can copy it from this book's code repository provided at the following link and paste its contents into webpack.config.js:

https://bit.ly/sveltebook-webpack

Let's examine the contents of the file.

After importing all the requisite modules, we define the prod variable, which is true if we're building the application for production, as determined from the NODE_ENV environmental variable:

const mode = process.env.NODE_ENV || 'development'
const prod = mode === 'production'

As we'll see in the next section, when building for production, we are enabling further optimizations, such as minification of the bundled JavaScript file. On the other hand, when building for development, we're enabling support for extra development tools, such as live reload and debugging.

The main part of the file is the configuration object for Webpack. This is a dictionary, and it's the exported symbol from the file:

module.exports = {
    entry: { /* ... */ },
    resolve: { /* ... */ },
    output: { /* ... */ },
    module: { /* ... */ },
    mode,
    plugins: [ /* ... */ ],
    devServer: { /* ... */ },
    devtool: prod ? false: 'source-map'
}

A lot of the content of the file is boilerplate code, but it's worth highlighting a few things:

• We define an entrypoint called bundle, starting from src/main.js.
• In the resolve dictionary, we are changing Webpack's defaults to better support Svelte modules downloaded from NPM, which often ship with uncompiled .svelte files.
• In the output configuration, we are telling Webpack to place the files in the public folder. Because the main entrypoint's name is bundle, the compiled JavaScript bundle will be located at public/bundle.js.
• The module dictionary ensures that Webpack loads Svelte files (with the .svelte extension) and handles them correctly, as well as .css files.
• In the plugins object we are loading the dotenv plugin, which we'll use later in the sample application to inject configuration values.

Webpack is highly customizable and features a lot of different options. It also comes with a large number of plugins. You can read more about configuring Webpack in the official documentation: https://webpack.js.org/guides/.