@ta-interaktiv/webpack-config

@ta-interaktiv Webpack Configuration

Installation

yarn add @ta-interaktiv/webpack-config webpack-merge --dev

The following files are added to your project root directory, unless they already exist:

• webpack.config.js
• tsconfig.json
• .taStandalonerc.yml
• src/__tests__/taStandalonerc.spec.ts
• src/types/*.d.ts

Add those files to your git repository using git add ., and then commit the changes.

You may adapt these files to your liking (and in the case of .taStandalonerc.yml, you should), they won't be overwritten by subsequent installs.

.taStandalonerc.yml Configuration

There is only one canonical URL for all tenants. For projects from "Redaktion Tamedia", this will default to tagesanzeiger.ch (sorry, it's just the biggest one 🤷🏼‍♂️). For projects that are exclusive to other tenants, change the site_name property to the domain of your tenant.

Configuration example for https://interaktiv.derbund.ch/ext/2019/sozialhilfe-check/, which was exclusive to Der Bund:

language: de
pageTitle: >
  Das müssen Sie wissen, bevor Sie über die Sozialhilfe abstimmen

description: >
  Am 19. Mai stimmt der Kanton Bern über die Zukunft der Sozialhilfe  ab. Was sagen Gegner und Befürworter? Wie sehen die Zahlen aus?  Wie geht es den Betroffenen?

author: Fabian Christl, Christian Zellweger
twitterCreator: '@derbund'
keywords: Abstimmung, Sozialhilfe, Kanton Bern
articleId: !!str 16186604
slug: ext/2019/sozialhilfe-check
image: https://interaktiv.derbund.ch/ext/2019/sozialhilfe-check/teaser.jpg
site_name: derbund.ch
twitterSite: '@derbund'
showLoader: false
isEmbeddable: false
section: interactives

The above example will produce a canonical URL of https://interaktiv.derbund.ch/ext/2019/sozialhilfe-check/.

PHP Conversion (deprecated)

In order to allow different publications use the same project code base, we convert our compiled projects to PHP, which then replaces some variables on the server depending with which URL the user is visiting the project.

This Webpack config contains the script to do so. Add the following script to your package.json file:

{
  "scripts": {
    "postdist": "convert-to-php"
  }
}

By default, the React Base Project has this already set up.

Supported File Types

The following file types have loaders configured in this Webpack configuration:

• .js, .jsx, .ts, .tsx
• .json
• .worker.js, .worker.ts – Web Workers
• .md, .mdx – Markdown, and MDX
• .geojson – GeoJSON files; using this file extension enables TypeScript type support
• .css
• .scss, .sass – Sass Stylesheets
• .less – Less Stylesheets
• .styl – Stylus Stylesheets
• .module.css, .m.css – CSS Modules
• .module.scss, .m.scss, .module.sass, .m.sass – Sass Stylesheets as CSS Modules
• .yml, .yaml – YAML
• .csv, .tsv, .dsv – Delimiter-separated Values
• .woff, .woff2
• .mp3, .mp4, .wav, .aif, .aiff, .m4a – Audio files
• .mpg, .mpeg, .mov, .webm, .ogv, .m4v– Video files
• .png, .jpg, .jpeg, .gif, .svg– Image files (see below)

Handling Image Files

By default, importing image files will just give you the URL to the image file that you can use in the src attribute.

For more complex situations, you can use the SrcSet-Loader, which not only gives you the option to optimize your images for different viewports; but also gives you tiny, blurred placeholder images.

// append a query with the image widths you want
import image from './someImage.jpg?sizes=800w+500w+200w&placeholder&srcset'

gives you the following object:

{
  srcSet: 'xxxx.jpg 800w, yyyy.jpg 500w, zzzzz.jpg 200w',
  sources: {
    '800w': 'xxxx.jpg',
    '500w': 'yyyy.jpg',
    '200w': 'zzzz.jpg'
  },
  placeholder: {
    url: 'placeholder.svg',
    color: [
      1, // red
      1, // green
      1, // blue
      1, // alpha
    ],
    ratio: 1.2
  }
}

• &placeholder is optional, you might not always need a placeholder.
• &srcset is optional, but needs to be appended last if you want convenient typing in TypeScript.

Migration from Previous Webpack Configs in React Base

2.x to 3.x

Starting with 3.0.0, the new .taStandalonerc.yml config has removed the canonicalUrl property. The canonical URL that is being used for SEO purposes is generated from the combination of the site_name and slug properties.

1. Remove the existing unit test under src/__tests__/taStandalonerc.spec.ts, if available
2. A new file called .taStandalonerc.yml should have been added to your project directory. Copy the data from your original .taStandalonerc to this new file; and add new data:
3. Add the articleId – just the number.
4. Add the project slug (e.g. 2020/react-base) in case you do not use GitLab CI deployment (otherwise the slug is taken from the .gitlab-ci.yml file).
5. Delete the .taStandalonerc file
6. Add the new files to git (using git add .) and commit the changes.

1.x to 2.x

1. Remove the /cfg folder

2. In package.json, replace in scripts.start: yarn run serve.

3. Remove all dev-dependencies in package.json that end in -loader (unless you refer to them in your own webpack.config.json).

4. Same goes for all dev-dependencies that end in -webpack-plugin

5. Add (or replace) the following webpack.config.js to your root folder:

   const merge = require('webpack-merge')
   const defaultConfig = require('@ta-interaktiv/webpack-config')
   
   module.exports = env => {
     /**
      * Add any additional configs here for all environments. These will be
      * merged in with the default configuration.
      */
     let generalConfig = {}
   
     /**
      * Add environment-specific additional configs in the switch block below.
      * These will be merged in with the default configuration.
      * @type {{}}
      */
     let envSpecificConfig = {}
   
     if (env.production) {
       envSpecificConfig = {
         resolve: {
           alias: {
             // Preact Configuration
             // Smallest bundle size, but has compatibility problems, best used for
             // mostly static pages
             // If your build doesn't work, disable these three lines and enable
             // React-lite as an alternative
             react: 'preact-compat',
             'react-dom': 'preact-compat',
             'create-react-class': 'preact-compat/lib/create-react-class'
   
             // React-Lite Configuration
             // Pretty decent bundle size, mostly compatible with React. For very
             // large projects or when your build doesn't work, you might want to
             // disable all alternatives here and just go with the original React.
             // 'react': 'react-lite',
             // 'react-dom': 'react-lite',
           }
         }
       }
     } else {
       envSpecificConfig = {}
     }
   
     const projectSpecificConfig = merge(generalConfig, envSpecificConfig)
   
     return merge.smartStrategy({
       // Add merging strategies here; see https://www.npmjs.com/package/webpack-merge#mergestrategy-field-prependappendreplaceconfiguration--configuration
     })(defaultConfig(env), projectSpecificConfig)
   }