expose webpack config

[vdanchenkov]

My attempt to implement #40. I think it's the simplest possible solution.

To customize config user have to create webpack.js in project root and export function that adjusts config as needed.

module.exports = (config, hotReload) => {
  if (hotReload) {
    const babelLoader = config.module.loaders.find(({loader}) => loader === 'babel')
    babelLoader.query.plugins.push(require.resolve('babel-plugin-styled-components-named'))
  }
  // Style loader not works for some reason, but it should be configured similar to this:
  config.resolveLoader.root.push(require('path').join(__dirname, 'node_modules'))
  config.module.preLoaders.push({ test: /\.css$/, loader: "style!css" })
}

[rauchg]

I think this is a great solution. I was also thinking of using a function to decorate the suggested webpack config next wants.

What do people think about:

• Defaulting to webpack.js as name

• Should we add a config flag in package.json? next.webpack?

• Should we instead roll this together with Custom server logic / routing #25 and then you can initialize the server and supply the webpack config?

  next({
   webpack: (cfg) => cfg
  })

[giladgray]

how about expecting the function to return the new config instead of mutating an argument? then it's more sensible to implement via Object.assign.

// right here
config = require("...");

// webpack.js in my project
module.exports = (config) => Object.assign(config, {
  // my custom config
})

[giladgray]

I would suggest the name webpack.config.js for consistency with webpack itself, though admittedly the API is somewhat specialized here.
http://webpack.github.io/docs/configuration.html

[vdanchenkov]

@giladgray I will change it to use returned value.

Actually I don't like both names. webpack.config.js suggests that it exports config object. webpack.js looks like it exports webpack instance itself.

Maybe webpack.next.js would be better?

Actually, I think that it would be better to configure everything in the single point as suggested by @rauchg, but I don't feel like diving so deep in next.js code for now.

next({
 webpack: (cfg) => cfg
})

[giladgray]

@vdanchenkov my comment on the code above (and the author's response) suggests that this file will in fact export the config object.

however webpack.next.js makes some sense cuz it's similar to webpack's own usage but makes it clear that we're doing something slightly different.

a code-less solution should be high priority here because the typical usage will be via NPM script. i don't want to have to create a file just to invoke next() with some config when that could all be done via the CLI. (now i'm thinking a CLI flag to override the file path might also be helpful, but that could come later.)

[CompuIves]

I think it would be better to use a centralised config for Next called something like next.config.js. I made a PR for it here: #222. I think this could work great together with this PR.

You could for example do something like this:

// next.config.js

module.exports = {
  webpack: (cfg) => cfg
}

[vdanchenkov]

@CompuIves How should we proceed? Will you apply webpack configuration functionality to #222 before it's merged? In that case I'll close this PR in favour of yours.

[CompuIves]

@vdanchenkov I added your functionality to #222!