@gridonic/webpack

Our pre-configured webpack. Nothing more, nothing less.

How to use?

⚠️ It’s highly recommended to use our @gridonic/cli since it can scaffold your project and works seamlessly with our webpack.

Manual setup

If you need to set up your project manually, those steps will get you up and running:

• npm install --save-dev @gridonic/webpack

  This will install our npm package.

• touch webpack.config.js

  This creates a webpack.config.js file and a very simple configuration could look like this:

  const { extendConfig } = require('@gridonic/webpack');
  
  module.exports = extendConfig
      .forDevelopment({ /* Options for development only */ })
      .forProduction({ /* Options for production only */ })
      .forAll({ /* Options for all environments */ })
      .toConfig;
  

• Add npm scripts to your package.json. This is optional if you have our CLI installed globally.

  {
    "scripts": {
      "dev": "webpack-dev-server --hot",
      "build": "webpack --mode=production"
    }
  }
  

Finally you…

• run npm run dev if you want to develop on your project, or
• run npm run build if you want to ship your code.

Simple, right? Without any adjustments our pre-configured webpack runs with …

• ESLint
• Babel
• PostCSS
• Sass
• Imagemin
• Vue.js (via preset, see examples)

CLI

This package provides commands and flags for our @gridonic/cli.

Presets

Our webpack setup should be flexible and simple to use at the same time. That’s why we have configurable presets for tasks that come up frequently but are not included in the default core configuration.

List of available presets

Preset	Description
file	Use this if you need to add files in general (e.g. video in html).
raw	Use this if you need to import files as strings.
vue	Use this if you are going to develop a Vue.js application.

Examples

Importing arbitrary files as strings

Let’s say you need to import .csv files for example. In that case you’ll need to add the raw preset and adjust the test RegEx.

// webpack.config.js

const { extendConfig } = require('@gridonic/webpack');
    
module.exports = extendConfig
    .usePreset('raw', { test: /\.csv$/ })
    .toConfig;

That’s it. You now can import your .csv files as strings.

import TopTenCommits from './TopTenCommits.csv';

console.log(TopTenCommits);

Develop a Vue.js application

Setting up the build environment for a Vue.js application is straight forward if you use our @gridonic/generator and @gridonic/cli. If you want to do it manually you will still have a pain free life.

// webpack.config.js

const { extendConfig } = require('@gridonic/webpack');

module.exports = extendConfig
    .usePreset('vue')
    .toConfig;

Looking for third party configuration files like Babel, ESLint or PostCSS? Feel free to use what ever you may like.

Use https with Dev Server

Add the https preset to your configuration. By default, the config expects a .ca, .crt and .key file in the folder /usr/local/etc/httpd/ssl/, to match the ssl information you use for your apache server.

If you store your ssl files in another location, you can specify them in your local .env file (Or any other .env file that is ignored in git). Use the following keys to specify the file locations: SSL_CA, SSL_CERT, SSL_KEY

gridonic.ch ・ gridonic.github.io ・ @gridonic