diff --git a/v2/lib/commands/build.js b/v2/lib/commands/build.js index 69f47c73a2..a714a95487 100644 --- a/v2/lib/commands/build.js +++ b/v2/lib/commands/build.js @@ -6,6 +6,7 @@ */ const webpack = require('webpack'); +const CleanWebpackPlugin = require('clean-webpack-plugin'); const path = require('path'); const chalk = require('chalk'); const fs = require('fs-extra'); @@ -26,7 +27,7 @@ function compile(config) { stats.toJson().errors.forEach(e => { console.error(e); }); - reject(new Error(`Failed to compile with errors.`)); + reject(new Error('Failed to compile with errors.')); } if (stats.hasWarnings()) { stats.toJson().warnings.forEach(warning => { @@ -44,25 +45,38 @@ module.exports = async function build(siteDir) { const props = await load(siteDir); - let serverConfig = createServerConfig(props).toConfig(); - let clientConfig = createClientConfig(props).toConfig(); - // Apply user webpack config. const { + outDir, siteConfig: {configureWebpack}, } = props; - clientConfig = applyConfigureWebpack(configureWebpack, clientConfig, false); - serverConfig = applyConfigureWebpack(configureWebpack, serverConfig, true); + + const clientConfigObj = createClientConfig(props); + // Remove/clean build folders before building bundles. + clientConfigObj + .plugin('clean') + .use(CleanWebpackPlugin, [outDir, {verbose: false, allowExternal: true}]); + const serverConfigObj = createServerConfig(props); + const clientConfig = applyConfigureWebpack( + configureWebpack, + clientConfigObj.toConfig(), + false, + ); + const serverConfig = applyConfigureWebpack( + configureWebpack, + serverConfigObj.toConfig(), + true, + ); // Build the client bundles first. - // We cannot run them in parallel because the server need to pickup the correct client bundle name + // We cannot run them in parallel because the server needs to know + // the correct client bundle name. await compile(clientConfig); - // Build the server bundles (render the static HTML and pick client bundle) + // Build the server bundles (render the static HTML and pick client bundle), await compile(serverConfig); // Copy static files. - const {outDir} = props; const staticDir = path.resolve(siteDir, 'static'); const staticFiles = await globby(['**'], { cwd: staticDir, diff --git a/v2/lib/core/serverEntry.js b/v2/lib/core/serverEntry.js index b749e89bdf..60a06704be 100644 --- a/v2/lib/core/serverEntry.js +++ b/v2/lib/core/serverEntry.js @@ -12,7 +12,7 @@ import Helmet from 'react-helmet'; import {getBundles} from 'react-loadable/webpack'; import Loadable from 'react-loadable'; -import reactLoadableStats from '@build/react-loadable.json'; //eslint-disable-line +import reactLoadableStats from '@generated/react-loadable.json'; //eslint-disable-line import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line import routes from '@generated/routes'; // eslint-disable-line import preload from './preload'; diff --git a/v2/lib/webpack/client.js b/v2/lib/webpack/client.js index b0ccb8cde1..7495c1327c 100644 --- a/v2/lib/webpack/client.js +++ b/v2/lib/webpack/client.js @@ -5,7 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -const cleanWebpackPlugin = require('clean-webpack-plugin'); const path = require('path'); const webpackNiceLog = require('webpack-nicelog'); const {StatsWriterPlugin} = require('webpack-stats-plugin'); @@ -15,14 +14,12 @@ const createBaseConfig = require('./base'); const {applyChainWebpack} = require('./utils'); module.exports = function createClientConfig(props) { + const isProd = process.env.NODE_ENV === 'production'; + const config = createBaseConfig(props); config.entry('main').add(path.resolve(__dirname, '../core/clientEntry.js')); - const {outDir} = props; - // Remove/clean build folders before building bundles. - config - .plugin('clean') - .use(cleanWebpackPlugin, [outDir, {verbose: false, allowExternal: true}]); + const {generatedFilesDir} = props; // Write webpack stats object so we can pickup correct client bundle path in server. config .plugin('clientStats') @@ -30,11 +27,10 @@ module.exports = function createClientConfig(props) { config .plugin('reactLoadableStats') .use(ReactLoadablePlugin, [ - {filename: path.join(outDir, 'react-loadable.json')}, + {filename: path.join(generatedFilesDir, 'react-loadable.json')}, ]); // Show compilation progress bar and build time. - const isProd = process.env.NODE_ENV === 'production'; config .plugin('niceLog') .use(webpackNiceLog, [{name: 'Client', skipBuildTime: isProd}]); diff --git a/v2/lib/webpack/server.js b/v2/lib/webpack/server.js index df3b97082e..72c62e0a2f 100644 --- a/v2/lib/webpack/server.js +++ b/v2/lib/webpack/server.js @@ -7,7 +7,7 @@ const _ = require('lodash'); const path = require('path'); -const staticSiteGenerator = require('static-site-generator-webpack-plugin'); +const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin'); const webpackNiceLog = require('webpack-nicelog'); const createBaseConfig = require('./base'); const {applyChainWebpack} = require('./utils'); @@ -34,7 +34,7 @@ module.exports = function createServerConfig(props) { ...docsFlatMetadatas, ...pagesMetadatas, ].map(data => data.permalink); - config.plugin('siteGenerator').use(staticSiteGenerator, [ + config.plugin('siteGenerator').use(StaticSiteGeneratorPlugin, [ { entry: 'main', locals: { diff --git a/v2/test/loadSetup.js b/v2/test/loadSetup.js index 323135dead..e35274cf9a 100644 --- a/v2/test/loadSetup.js +++ b/v2/test/loadSetup.js @@ -9,7 +9,7 @@ import '@babel/polyfill'; import path from 'path'; import load from '@lib/load'; -// Helper methods to setup dummy/ fake projects +// Helper methods to setup dummy/fake projects const loadSetup = async name => { const fixtures = path.join(__dirname, '__fixtures__'); const simpleSite = path.join(fixtures, 'simple-site');