Have ideas to improve npm?Join in the discussion! »

    @ta-interaktiv/webpack-config
    TypeScript icon, indicating that this package has built-in type declarations

    3.5.13 • Public • Published

    @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.tsWeb Workers
    • .md, .mdx – Markdown, and MDX
    • .geojson – GeoJSON files; using this file extension enables TypeScript type support
    • .css
    • .scss, .sassSass Stylesheets
    • .lessLess Stylesheets
    • .stylStylus Stylesheets
    • .module.css, .m.cssCSS Modules
    • .module.scss, .m.scss, .module.sass, .m.sass – Sass Stylesheets as CSS Modules
    • .yml, .yamlYAML
    • .csv, .tsv, .dsvDelimiter-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.[^1]

    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)
      }

    [^1]: Webpack Dashboard has been integrated into the Webpack configuration.

    Use the Electron Webpack Dashboard to display dashboard content.

    Install

    npm i @ta-interaktiv/webpack-config

    DownloadsWeekly Downloads

    94

    Version

    3.5.13

    License

    ISC

    Unpacked Size

    93.8 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar