Skip to content

Commit

Permalink
fix extract-text--webpack-plugin instance reuse errors (gatsbyjs#3652)
Browse files Browse the repository at this point in the history
  • Loading branch information
erquhart authored and jastack committed Jan 24, 2018
1 parent a354d8b commit d76d4a9
Showing 1 changed file with 22 additions and 12 deletions.
34 changes: 22 additions & 12 deletions packages/gatsby/src/utils/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,16 @@ const genBabelConfig = require(`./babel-config`)
const { withBasePath } = require(`./path`)
const HashedChunkIdsPlugin = require(`./hashed-chunk-ids-plugin`)

// Use separate extract-text-webpack-plugin instances for each stage per the docs
const extractDevelopHtml = new ExtractTextPlugin(`build-html-styles.css`)
const extractBuildHtml = new ExtractTextPlugin(`build-html-styles.css`, {
allChunks: true,
})
const extractBuildCss = new ExtractTextPlugin(`styles.css`, { allChunks: true })
const extractBuildJavascript = new ExtractTextPlugin(`build-js-styles.css`, {
allChunks: true,
})

// Five stages or modes:
// 1) develop: for `gatsby develop` command, hot reload and CSS injection into page
// 2) develop-html: same as develop without react-hmre in the babel config for html renderer
Expand Down Expand Up @@ -200,7 +210,7 @@ module.exports = async (
__PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
__POLYFILL__: store.getState().config.polyfill,
}),
new ExtractTextPlugin(`build-html-styles.css`),
extractDevelopHtml,
]
case `build-css`:
return [
Expand All @@ -210,7 +220,7 @@ module.exports = async (
__PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
__POLYFILL__: store.getState().config.polyfill,
}),
new ExtractTextPlugin(`styles.css`, { allChunks: true }),
extractBuildCss,
]
case `build-html`:
return [
Expand All @@ -224,7 +234,7 @@ module.exports = async (
__PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
__POLYFILL__: store.getState().config.polyfill,
}),
new ExtractTextPlugin(`build-html-styles.css`, { allChunks: true }),
extractBuildHtml,
]
case `build-javascript`: {
// Get array of page template component names.
Expand Down Expand Up @@ -298,7 +308,7 @@ module.exports = async (
__POLYFILL__: store.getState().config.polyfill,
}),
// Extract CSS so it doesn't get added to JS bundles.
new ExtractTextPlugin(`build-js-styles.css`, { allChunks: true }),
extractBuildJavascript,
// Write out mapping between chunk names and their hashed names. We use
// this to add the needed javascript files to each HTML page.
new StatsWriterPlugin(),
Expand Down Expand Up @@ -435,13 +445,13 @@ module.exports = async (
config.loader(`css`, {
test: /\.css$/,
exclude: [/\.module\.css$/],
loader: ExtractTextPlugin.extract([`css?minimize`, `postcss`]),
loader: extractBuildCss.extract([`css?minimize`, `postcss`]),
})

// CSS modules
config.loader(`cssModules`, {
test: /\.module\.css$/,
loader: ExtractTextPlugin.extract(`style`, [
loader: extractBuildCss.extract(`style`, [
cssModulesConfig(stage),
`postcss`,
]),
Expand Down Expand Up @@ -471,10 +481,10 @@ module.exports = async (
// CSS modules
config.loader(`cssModules`, {
test: /\.module\.css$/,
loader: ExtractTextPlugin.extract(`style`, [
cssModulesConfig(stage),
`postcss`,
]),
loader: (stage === `build-html`
? extractBuildHtml
: extractDevelopHtml
).extract(`style`, [cssModulesConfig(stage), `postcss`]),
})

return config
Expand All @@ -491,13 +501,13 @@ module.exports = async (
test: /\.css$/,
exclude: [/\.module\.css$/],
// loader: `null`,
loader: ExtractTextPlugin.extract([`css`]),
loader: extractBuildJavascript.extract([`css`]),
})

// CSS modules
config.loader(`cssModules`, {
test: /\.module\.css$/,
loader: ExtractTextPlugin.extract(`style`, [
loader: extractBuildJavascript.extract(`style`, [
cssModulesConfig(stage),
`postcss`,
]),
Expand Down

0 comments on commit d76d4a9

Please sign in to comment.