SF DesignDev Packages

Appearance

Return to top
On this page

Vanilla (Webpack) Template

Scripts

The following scripts are available in this project's package.json:

  • dev: Starts the development server on http://localhost:8888.
  • start: Alias for dev.
  • build: Builds the project for production.
  • build:inline: Builds the project for production and prepares it to be inlined.
  • build:iframe: Builds the project for production and prepares it to be embedded via an <iframe>.

Project Structure 

project
├─ .sf-stuff/ (1)
├─ src/
│  ├─ assets/
│  ├─ js/
│  ├─ public/ (2)
│  ├─ scss/
│  ├─ index.html
│  └─ main.js
├─ .babelrc (3)
├─ .eslintrc.cjs
├─ .gitignore
├─ .prettierrc
├─ package.json
├─ postcss.config.cjs (4)
├─ README.md
└─ webpack.config.cjs (5)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Key Items

  1. Contains build scripts and global variables - you shouldn't need to touch these files.

  2. Contains files to be served at https://website.com/[file]. At build-time, these are copied from src/public to the top level of dist/.

  3. Configuration for Babel. This enables support for IE11 (see Disabling IE11 Support)

  4. Configuration file for PostCSS.

  5. Configuration file for Webpack.

Disabling IE11 Support

To disable IE11 support, and reduce bundle size significantly, simply remove the configuration object in .babelrc as shown:

json
{
  "exclude": "node_modules/**",
  "presets": [
    [
      "@babel/preset-env",
      { 
        "modules": "auto", 
        "useBuiltIns": "usage", 
        "corejs": 3, 
        "targets": { 
          "browsers": ["last 2 versions", "ie >= 11"] 
        } 
      } 
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Helpful Docs