From 879c921a8173e802cdb3eed26da209afd8053754 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 15 Apr 2020 11:56:30 +0200 Subject: [PATCH 1/4] Reorder functions by name Signed-off-by: soupette --- packages/strapi-admin/index.js | 86 +++++++++++++++++----------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/strapi-admin/index.js b/packages/strapi-admin/index.js index d36508109b..049c90361f 100644 --- a/packages/strapi-admin/index.js +++ b/packages/strapi-admin/index.js @@ -9,6 +9,49 @@ const chokidar = require('chokidar'); const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`)); +async function build({ dir, env, options, optimize }) { + // Create the cache dir containing the front-end files. + await createCacheDir(dir); + + const cacheDir = path.resolve(dir, '.cache'); + const entry = path.resolve(cacheDir, 'admin', 'src', 'app.js'); + const dest = path.resolve(dir, 'build'); + const config = getWebpackConfig({ entry, dest, env, options, optimize }); + + const compiler = webpack(config); + + return new Promise((resolve, reject) => { + compiler.run((err, stats) => { + let messages; + if (err) { + if (!err.message) { + return reject(err); + } + messages = { + errors: [err.message], + warnings: [], + }; + } else { + messages = stats.toJson({ all: false, warnings: true, errors: true }); + } + + if (messages.errors.length) { + // Only keep the first error. Others are often indicative + // of the same problem, but confuse the reader with noise. + if (messages.errors.length > 1) { + messages.errors.length = 1; + } + return reject(new Error(messages.errors.join('\n\n'))); + } + + return resolve({ + stats, + warnings: messages.warnings, + }); + }); + }); +} + async function createPluginsJs(plugins, localPlugins, dest) { const content = ` const injectReducer = require('./utils/injectReducer').default; @@ -153,49 +196,6 @@ async function createCacheDir(dir) { ); } -async function build({ dir, env, options, optimize }) { - // Create the cache dir containing the front-end files. - await createCacheDir(dir); - - const cacheDir = path.resolve(dir, '.cache'); - const entry = path.resolve(cacheDir, 'admin', 'src', 'app.js'); - const dest = path.resolve(dir, 'build'); - const config = getWebpackConfig({ entry, dest, env, options, optimize }); - - const compiler = webpack(config); - - return new Promise((resolve, reject) => { - compiler.run((err, stats) => { - let messages; - if (err) { - if (!err.message) { - return reject(err); - } - messages = { - errors: [err.message], - warnings: [], - }; - } else { - messages = stats.toJson({ all: false, warnings: true, errors: true }); - } - - if (messages.errors.length) { - // Only keep the first error. Others are often indicative - // of the same problem, but confuse the reader with noise. - if (messages.errors.length > 1) { - messages.errors.length = 1; - } - return reject(new Error(messages.errors.join('\n\n'))); - } - - return resolve({ - stats, - warnings: messages.warnings, - }); - }); - }); -} - async function watchAdmin({ dir, host, port, options }) { // Create the cache dir containing the front-end files. await createCacheDir(dir); From 3bfb68383567ce4e8e1d7541bf0c411d0b6b6c38 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 15 Apr 2020 12:56:51 +0200 Subject: [PATCH 2/4] Add custom webpack config option Signed-off-by: soupette --- packages/strapi-admin/index.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/strapi-admin/index.js b/packages/strapi-admin/index.js index 049c90361f..ff04aaa9cd 100644 --- a/packages/strapi-admin/index.js +++ b/packages/strapi-admin/index.js @@ -1,5 +1,6 @@ /* eslint-disable no-useless-escape */ const path = require('path'); +const _ = require('lodash'); const fs = require('fs-extra'); const webpack = require('webpack'); const getWebpackConfig = require('./webpack.config.js'); @@ -9,6 +10,21 @@ const chokidar = require('chokidar'); const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`)); +function getCustomWebpackConfig(dir, config) { + const adminConfigPath = path.join(dir, 'admin', 'admin.config.js'); + let webpackConfig = _.cloneDeep(getWebpackConfig(config)); + + if (fs.existsSync(adminConfigPath)) { + const adminConfig = require(path.resolve(adminConfigPath)); + + if (_.isFunction(adminConfig.webpack)) { + webpackConfig = adminConfig.webpack(webpackConfig); + } + } + + return webpackConfig; +} + async function build({ dir, env, options, optimize }) { // Create the cache dir containing the front-end files. await createCacheDir(dir); @@ -16,7 +32,7 @@ async function build({ dir, env, options, optimize }) { const cacheDir = path.resolve(dir, '.cache'); const entry = path.resolve(cacheDir, 'admin', 'src', 'app.js'); const dest = path.resolve(dir, 'build'); - const config = getWebpackConfig({ entry, dest, env, options, optimize }); + const config = getCustomWebpackConfig(dir, { entry, dest, env, options, optimize }); const compiler = webpack(config); @@ -223,7 +239,8 @@ async function watchAdmin({ dir, host, port, options }) { }, }; - const server = new WebpackDevServer(webpack(getWebpackConfig(args)), opts); + const webpackConfig = getCustomWebpackConfig(dir, args); + const server = new WebpackDevServer(webpack(webpackConfig), opts); server.listen(port, host, function(err) { if (err) { From 62148daf7a143230b35e5bc69473bb77761e0692 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 15 Apr 2020 13:03:21 +0200 Subject: [PATCH 3/4] Add documentation Signed-off-by: soupette --- docs/.vuepress/config.js | 6 +++++- .../admin-panel/custom-webpack-config.md | 16 ++++++++++++++++ packages/strapi-admin/index.js | 2 +- 3 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 docs/3.0.0-beta.x/admin-panel/custom-webpack-config.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index e10ce3aaf0..c5712249c5 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -220,7 +220,11 @@ module.exports = { { collapsable: true, title: '⚙️️ Admin Panel', - children: ['/3.0.0-beta.x/admin-panel/customization', '/3.0.0-beta.x/admin-panel/deploy'], + children: [ + '/3.0.0-beta.x/admin-panel/customization', + '/3.0.0-beta.x/admin-panel/custom-webpack-config', + '/3.0.0-beta.x/admin-panel/deploy', + ], }, { collapsable: true, diff --git a/docs/3.0.0-beta.x/admin-panel/custom-webpack-config.md b/docs/3.0.0-beta.x/admin-panel/custom-webpack-config.md new file mode 100644 index 0000000000..f840ace0a9 --- /dev/null +++ b/docs/3.0.0-beta.x/admin-panel/custom-webpack-config.md @@ -0,0 +1,16 @@ +# Custom Webpack Config + +In order to extend the usage of webpack, you can define a function that extends its config inside `admin/admin.config.js`, like so: + +```js +module.exports = { + webpack: (config, webpack) => { + // Note: we provide webpack above so you should not `require` it + // Perform customizations to webpack config + // Important: return the modified config + config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//)); + + return config; + }, +}; +``` diff --git a/packages/strapi-admin/index.js b/packages/strapi-admin/index.js index ff04aaa9cd..a9c643c8e0 100644 --- a/packages/strapi-admin/index.js +++ b/packages/strapi-admin/index.js @@ -18,7 +18,7 @@ function getCustomWebpackConfig(dir, config) { const adminConfig = require(path.resolve(adminConfigPath)); if (_.isFunction(adminConfig.webpack)) { - webpackConfig = adminConfig.webpack(webpackConfig); + webpackConfig = adminConfig.webpack(webpackConfig, webpack); } } From 8a2580222f19e33bd460581e9d347fdabb19fc89 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 15 Apr 2020 15:03:53 +0200 Subject: [PATCH 4/4] Fix PR feedback Signed-off-by: soupette --- packages/strapi-admin/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/strapi-admin/index.js b/packages/strapi-admin/index.js index a9c643c8e0..d083767602 100644 --- a/packages/strapi-admin/index.js +++ b/packages/strapi-admin/index.js @@ -12,13 +12,20 @@ const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`)) function getCustomWebpackConfig(dir, config) { const adminConfigPath = path.join(dir, 'admin', 'admin.config.js'); - let webpackConfig = _.cloneDeep(getWebpackConfig(config)); + let webpackConfig = getWebpackConfig(config); if (fs.existsSync(adminConfigPath)) { const adminConfig = require(path.resolve(adminConfigPath)); if (_.isFunction(adminConfig.webpack)) { webpackConfig = adminConfig.webpack(webpackConfig, webpack); + + if (!webpackConfig) { + console.error( + `${chalk.red('Error:')} Nothing was returned from your custom webpack configuration` + ); + process.exit(1); + } } }