Custom webpack config #40

rauchg · 2016-10-24T19:48:13Z

It'd be nice to add hooks for webpack, and describe on the README (similarly to #26) how to for example add require('./something.css') support.

The text was updated successfully, but these errors were encountered:

davidrossjones · 2016-10-25T20:59:23Z

Is this currently unsupported full stop? e.g. there is no way for me to add css-loader to parse .css files via Webpack?

TheLarkInn · 2016-10-25T21:04:19Z

You could make a layer that implements Tapable and let people plugin to the instance. :) easy plugin system.

TheLarkInn · 2016-10-26T00:29:44Z

Or if anything a hook before build and dev that can return the 'compiler' instance or 'config object' before it calls .run or .watch.

This would provide a single extensible point in which people can explore customize, break, or change the configuration to suit their snowflake applications/workflows.

DarrylD · 2016-10-27T18:05:15Z

Adding css is pretty important. For the time being, I just leveraged <Head> with cdns or from ./static

Example

<Head>
    <title>My page title</title>
    <link rel="stylesheet" href="/static/css.min.css" />
</Head>

DarrylD · 2016-10-29T02:25:55Z

would this be considered a webpack issue? wondering if having access to the config could resolve this

ugiacoman · 2016-10-29T13:41:08Z

Custom webpack config would be incredible, I'm trying to use react-toolbox but without a SASS loader, I can't do much...

Is there an unofficial way to include a custom webpack config at this point?

pksjce · 2016-10-31T16:04:26Z

IMO, there are two ways of solving this

Allow custom webpack.config.js. Something like react-storybook

Pros - Full control over the application.

Cons - Right now, next.js gives a lot of functionality out of the box which can be compromised.
Have a seperate webpack.next.js in the application code, which allows only a subset of the webpack configs and then adds on to/overrides the current config.

Pros - We can allow addition of custom loaders/plugins.

Cons - Does not provide full control over the application since only a subset is allowed. User needs to be educated on what can be customised and what cannot ie need proper warnings and error messages for the same.

ugiacoman · 2016-10-31T17:03:02Z

@pksjce Have a seperate webpack.next.js in the application code, which allows only a subset of the webpack configs and then adds on to/overrides the current config.

This solution sounds pretty good

timoxley · 2016-11-01T03:15:57Z

A simple option could be to try load user's webpack config, falling back to default config.

User's config would totally overrides the default config, however, the default config would be loadable e.g const nextConfig = require('next/webpack.config')

Then the user could use whatever to extend/mutate this.

e.g.

const nextConfig = require('next/webpack.config')

module.exports = Object.assign({}, nextConfig, {
  devtool: 'eval-source-map'
})

For example, override customise the babel transforms config as needed (#26):

const nextConfig = require('next/webpack.config')

// find babel loader
const babelLoader = nextConfig.module.loaders.find(({loader}) => loader === 'babel')

// mutate to add custom plugin
babelLoader.plugins.unshift('transform-decorators-legacy') // must run first

module.exports = nextConfig

Would also allow users to opt into using something with fancy recursive merging logic like lodash.merge or webpack-config:

const Config = require('webpack-config')

module.exports = new Config().merge(require.resolve('next/webpack.config'), {
  resolve: {
    alias: {
      'immutable': require.resolve('immutable/dist/immutable.min.js')
    }
  }
})

Ideally, this would only need to be used as an escape hatch for emergencies.

vdanchenkov · 2016-11-01T10:43:40Z

What do you think about #174 ? Given it's safe to mutate original config and small chances that someone would like to override config completely, I'd not ask end user to return anything from the function. It would be original config object anyway.

nickjackson · 2016-11-01T11:49:33Z

I like @timoxley's suggestion above. Object.assign seems like a good way of keeping the config structure familiar, allowing for simple loader/plugin additions, as well as the ability to completely override the default if the user wishes.

vdanchenkov · 2016-11-01T12:11:15Z

@nickjackson
Is

return Object.assign({}, nextConfig, {
  devtool: 'eval-source-map'
})

looks more familiar then?

nextConfig.devtool = 'eval-source-map'

I could add return value to API and it would not significantly change suggested usage, but it will make developers think that they have to clone original config while they are not required to do it.

It would make usage too complicated if we require developers to keep original config unchanged.

timoxley · 2016-11-01T18:23:42Z

@vdanchenkov using the returned object would allow users to mutate or clone or return an entirely new object. Your current implementation only allows users the option to mutate.

Not sure if this approach is the right avenue or not though.

pyrossh · 2016-11-04T07:26:09Z

The people at https://github.com/kadirahq/react-storybook have implemented a custom webpack config loader for their app which users can easily add to.

arunoda · 2016-11-09T18:29:58Z

@pyros2097 Thanks for the mention. Yep, we allow both webpack and babel and it's working pretty well.

FYI: This is how we do it.

@rauchg, if this is something you'd like to see, I'm happy to work on this.

ajhyndman · 2016-12-04T12:32:45Z

Are there any open questions left on this? I really like the idea of the API converging with react-storybook's.

rauchg · 2016-12-04T12:34:13Z

Please see #174. It's very possible that we'll admit both a function and an object in the future, but we'll start with the more powerful variant (fn)

ajhyndman · 2016-12-04T12:39:05Z

@rauchg Oh, cool. Thanks for the update!

rauchg added the exploration label Oct 24, 2016

mmmeff mentioned this issue Oct 26, 2016

Add typescript example #96

Closed

dlindenkreuz mentioned this issue Oct 27, 2016

Support SASS #110

Closed

dlindenkreuz mentioned this issue Oct 28, 2016

Shared dependencies between pages #118

Closed

nionis mentioned this issue Oct 31, 2016

HMR not working when using bash on windows 10 #166

Closed

pksjce mentioned this issue Oct 31, 2016

How to enable Sourcemaps? #137

Closed

vdanchenkov mentioned this issue Nov 1, 2016

expose webpack config #174

Closed

frol mentioned this issue Nov 7, 2016

PROOF-OF-CONCEPT: Externalized React, React-DOM to support React Addons #221

Closed

CompuIves mentioned this issue Nov 7, 2016

Exploration of different config + expose webpack config #222

Merged

sergiodxa mentioned this issue Nov 21, 2016

Proxy to Rest API #281

Closed

sergiodxa mentioned this issue Dec 3, 2016

Make CSS-in-JS opt-in #319

Closed

MoOx mentioned this issue Dec 8, 2016

New data/collection API MoOx/phenomic#889

Closed

nkzawa closed this as completed Dec 29, 2016

lock bot locked as resolved and limited conversation to collaborators May 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom webpack config #40

Custom webpack config #40

rauchg commented Oct 24, 2016

davidrossjones commented Oct 25, 2016

TheLarkInn commented Oct 25, 2016

TheLarkInn commented Oct 26, 2016

DarrylD commented Oct 27, 2016 •

edited

Loading

DarrylD commented Oct 29, 2016

ugiacoman commented Oct 29, 2016 •

edited

Loading

pksjce commented Oct 31, 2016

ugiacoman commented Oct 31, 2016

timoxley commented Nov 1, 2016 •

edited

Loading

vdanchenkov commented Nov 1, 2016

nickjackson commented Nov 1, 2016

vdanchenkov commented Nov 1, 2016

timoxley commented Nov 1, 2016

pyrossh commented Nov 4, 2016

arunoda commented Nov 9, 2016

ajhyndman commented Dec 4, 2016

rauchg commented Dec 4, 2016

ajhyndman commented Dec 4, 2016

Custom webpack config #40

Custom webpack config #40

Comments

rauchg commented Oct 24, 2016

davidrossjones commented Oct 25, 2016

TheLarkInn commented Oct 25, 2016

TheLarkInn commented Oct 26, 2016

DarrylD commented Oct 27, 2016 • edited Loading

DarrylD commented Oct 29, 2016

ugiacoman commented Oct 29, 2016 • edited Loading

pksjce commented Oct 31, 2016

ugiacoman commented Oct 31, 2016

timoxley commented Nov 1, 2016 • edited Loading

vdanchenkov commented Nov 1, 2016

nickjackson commented Nov 1, 2016

vdanchenkov commented Nov 1, 2016

timoxley commented Nov 1, 2016

pyrossh commented Nov 4, 2016

arunoda commented Nov 9, 2016

ajhyndman commented Dec 4, 2016

rauchg commented Dec 4, 2016

ajhyndman commented Dec 4, 2016

DarrylD commented Oct 27, 2016 •

edited

Loading

ugiacoman commented Oct 29, 2016 •

edited

Loading

timoxley commented Nov 1, 2016 •

edited

Loading