Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable extension of webpack config by consumers #87

Merged
merged 5 commits into from Nov 24, 2015
Merged

Enable extension of webpack config by consumers #87

merged 5 commits into from Nov 24, 2015

Commits on Nov 22, 2015

  1. Enable extension of webpack config by consumers 

    Add webpack-configurator which enables passing an object to a
gatsby.config.js. This object has a few convenience functions for
managing loaders as well as plugins (and arbitrary keys) relating to
webpack configuration.

* Move webpack config to JS
* Allows consumers to modify loaders and plugins based on stage.

Here is a webpack config which uses the new extensibility to add
css-modules, classnames and postcss support to a static site.

```javascript
var ExtractTextPlugin = require("extract-text-webpack-plugin");

function configureDevelopment(config) {
  config.removeLoader('css');
  config.loader('css', function(cfg) {
    cfg.test = /\.css$/;
    cfg.loader = 'style!css?modules!postcss'
    return cfg
  })
  config.merge({
    postcss: [
      require('postcss-import')(),
      require('postcss-cssnext')({
        browsers: 'last 2 versions'
      })
    ]
  })
}

function configureForJSBundle(config) {
  config.removeLoader('css');
  config.loader('css', function(cfg) {
    cfg.test = /\.css$/;
    cfg.loader = 'css/locals?modules!postcss'
    return cfg
  })
}

function configureForHTMLGeneration(config) {
  config.removeLoader('css');
  config.loader('css', function(cfg) {
    cfg.test = /\.css$/;
    cfg.loader = ExtractTextPlugin.extract('style', 'css?modules&minimize!postcss');
    return cfg
  })
  config.plugin('extract-css',
                ExtractTextPlugin,
                ["styles.css"]);
  config.merge({
    postcss: [
      require('postcss-import')(),
      require('postcss-cssnext')({
        browsers: 'last 2 versions'
      })
    ]
  })
}

module.exports = function(config, env) {

  switch(env) {
    case 'production':
      configureForJSBundle(config);
    break;
    case 'static':
      configureForHTMLGeneration(config);
    break;
    default:
      configureDevelopment(config);
    break;
  }

  return config;
}

```

Given `pages/_template.jsx` which imports and uses the following
`pages/_template.css`:

```css
:root {
  --black: black;
}
.header {
    background: var(--black);
}
```

When running `gatsby build`, All css is extracted and turned into a
minified `styles.css`:

```css
._2D1e_Piibk-xdIwKzGpKuS{background:#000}
```

The bundle.js and static html files have a div that looks like:

```html
<div class="_2D1e_Piibk-xdIwKzGpKuS">
  ...
</div>
```

When running `gatsby develop`, the styles are included in the <head>,
unminified:

```html
<style type="text/css">._2D1e_Piibk-xdIwKzGpKuS {
    background: black;
}</style>
```
    @ChristopherBiscardi
    ChristopherBiscardi committed Nov 22, 2015
    Configuration menu
    Copy the full SHA
    652cf60 View commit details
    Browse the repository at this point in the history

  2. update readme

    @ChristopherBiscardi
    ChristopherBiscardi committed Nov 22, 2015
    Configuration menu
    Copy the full SHA
    f333363 View commit details
    Browse the repository at this point in the history

Commits on Nov 23, 2015

  1. delete old webpack config

    @ChristopherBiscardi
    ChristopherBiscardi committed Nov 23, 2015
    Configuration menu
    Copy the full SHA
    72ee97a View commit details
    Browse the repository at this point in the history

  2. Cleanup console.logs 

    Add react-hot back to coffeescript loader
    @ChristopherBiscardi
    ChristopherBiscardi committed Nov 23, 2015
    Configuration menu
    Copy the full SHA
    628f400 View commit details
    Browse the repository at this point in the history

  3. Abstract fetching/location of gatsby.config.js

    @ChristopherBiscardi
    ChristopherBiscardi committed Nov 23, 2015
    Configuration menu
    Copy the full SHA
    c1b1ba9 View commit details
    Browse the repository at this point in the history