Our webpack configuration.
Last updated 9 months ago by mzdr .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @gridonic/webpack 
SYNC missed versions from official npm registry.

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:

  1. npm install --save-dev @gridonic/webpack

    This will install our npm package.

  2. 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 */ })
  3. 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 …


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


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).
https Enable HTTPS support for webpack devServer.
raw Use this if you need to import files as strings.
statamic Use this if you are running with Statamic.
vue Use this if you are going to develop a Vue.js application.
yaml Adds support for importing YAML files.
copy Use this if you need to copy static files.


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

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

import TopTenCommits from './TopTenCommits.csv';


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

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

Enable HTTPS support for webpack’s devServer

Add the https preset to your webpack configuration. By default, the config expects a certificate authority (ca.pem) file, a server certificate (server.crt) file and a server key (server.key) file under the /usr/local/etc/httpd/ssl folder.

⚠️ These files must be used by your local web server as well.

// webpack.config.js

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

module.exports = extendConfig

If you store your SSL files in another location, you can specify them in your local .env file. For example:

# .env

SSL_KEY= /etc/httpd/ssl/server.key

Develop a (Vue) application with Statamic as a backend

We have a preset for Statamic related development. This should set up webpack accordingly. Currently those options are available specifically to this preset:

Preset Description
assetsPath Alias for output.path.
publicPath Alias for output.publicPath. This option will be used for production only. ⚠️
vhost Provide the vhost of your Statamic website. This domain will be whitelisted by the webpack dev server.

See below for an example.

// webpack.config.js

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

module.exports = extendConfig
    .usePreset('statamic', {
        assetsPath: resolve('../public/themes/my-theme/assets/'),
        publicPath: '/themes/my-theme/assets/',
        vhost: 'local.my-theme.gridonic.ch',


Current Tags

  • 1.3.1                                ...           latest (9 months ago)

18 Versions

  • 1.3.1                                ...           9 months ago
  • 1.3.0                                ...           9 months ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 0.4.5                                ...           a year ago
  • 0.4.4                                ...           a year ago
  • 0.4.3                                ...           a year ago
  • 0.4.2                                ...           a year ago
  • 0.4.1                                ...           a year ago
  • 0.4.0                                ...           a year ago
  • 0.3.0                                ...           a year ago
  • 0.2.2                                ...           a year ago
  • 0.2.1                                ...           a year ago
  • 0.2.0                                ...           a year ago
  • 0.1.0                                ...           a year ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (42)
Dev Dependencies (2)
Dependents (0)

Copyright 2014 - 2017 © taobao.org |