-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(build): make webpack config more flexible by exporting a function
BREAKING CHANGE: The webpack.config.js file has been changed to export a function instead of an object. You will need to change the last line from `module.exports = config;` to `module.exports.mergeConfig = mergeConfig;`. This change allows the prod/dev/test configs to inject some metadata into this file, allowing them to be simpler and have more control over the output. ISSUES CLOSED: #101
- Loading branch information
Brett Uglow
committed
Dec 28, 2016
1 parent
397759d
commit 8e42256
Showing
7 changed files
with
171 additions
and
172 deletions.
There are no files selected for viewing
83 changes: 15 additions & 68 deletions
83
lib/buildTool/webpack/buildBrowser/templates/dev.webpack.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,24 @@ | ||
| 'use strict'; | ||
|
|
||
| // START_CONFIT_GENERATED_CONTENT | ||
| <% | ||
| var configPath = paths.config.configDir + 'webpack/'; | ||
| var relativePath = configPath.replace(/([^/]+)/g, '..'); | ||
| -%> | ||
| const path = require('path'); | ||
| const webpack = require('webpack'); | ||
| const DefinePlugin = require('webpack/lib/DefinePlugin'); | ||
| const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); | ||
|
|
||
| let config = require('./webpack.config.js'); | ||
| const helpers = require('./webpackHelpers')(path.resolve(__dirname, '<%- relativePath %>')); | ||
|
|
||
| const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; | ||
| const HMR = helpers.hasProcessFlag('hot'); | ||
|
|
||
| /** | ||
| * Devtool | ||
| * Reference: https://webpack.js.org/configuration/devtool/ | ||
| * Type of sourcemap to use per build type | ||
| */ | ||
| Object.assign(config, { | ||
| devtool: 'cheap-module-source-map', | ||
| }); | ||
|
|
||
| config.node.process = true; // Not sure why we do this for development? | ||
|
|
||
|
|
||
| /** | ||
| * Add additional plugins to the compiler. | ||
| * | ||
| * See: http://webpack.github.io/docs/configuration.html#plugins | ||
| */ | ||
|
|
||
| /** | ||
| * Plugin: DefinePlugin | ||
| * Description: Define free variables. | ||
| * Useful for having development builds with debug logging or adding global constants. | ||
| * | ||
| * Environment helpers | ||
| * | ||
| * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin | ||
| */ | ||
| // NOTE: when adding more properties make sure you include them in custom-typings.d.ts | ||
| config.plugins.push( | ||
| new DefinePlugin({ | ||
| 'ENV': JSON.stringify(ENV), | ||
| 'HMR': HMR, | ||
| 'process.env': { | ||
| 'ENV': JSON.stringify(ENV), | ||
| 'NODE_ENV': JSON.stringify(ENV), | ||
| 'HMR': HMR, | ||
| } | ||
| }) | ||
| ); | ||
|
|
||
|
|
||
| /** | ||
| * Plugin LoaderOptionsPlugin (experimental) | ||
| * | ||
| * See: https://gist.github.com/sokra/27b24881210b56bbaff7 | ||
| */ | ||
| let loaderOptions = { | ||
| debug: true, | ||
| options: Object.assign({}, config.loaderOptions) | ||
| let configOptions = { | ||
| metaData: { | ||
| title: 'Confit Sample Project', | ||
| baseUrl: '/', | ||
| ENV: process.env.ENV = process.env.NODE_ENV = 'development', | ||
| jsSourceMap: 'cheap-module-source-map', | ||
| cssSourceMap: false, | ||
| }, | ||
| loaderOptions: { | ||
| debug: true | ||
| } | ||
| }; | ||
| // END_CONFIT_GENERATED_CONTENT | ||
|
|
||
| delete config.loaderOptions; // Remove the property so that config is valid | ||
|
|
||
| let loaderOptionsPlugin = new LoaderOptionsPlugin(loaderOptions); | ||
|
|
||
| config.plugins.push(loaderOptionsPlugin); | ||
| // START_CONFIT_GENERATED_CONTENT | ||
| let config = require('./webpack.config.js').mergeConfig(configOptions); | ||
| config.node.process = true; // Not sure why we do this for development? | ||
| // END_CONFIT_GENERATED_CONTENT | ||
|
|
||
| module.exports = config; |
82 changes: 15 additions & 67 deletions
82
lib/buildTool/webpack/buildBrowser/templates/prod.webpack.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,24 @@ | ||
| 'use strict'; | ||
|
|
||
| // START_CONFIT_GENERATED_CONTENT | ||
| <% | ||
| var configPath = paths.config.configDir + 'webpack/'; | ||
| var relativePath = configPath.replace(/([^/]+)/g, '..'); | ||
| -%> | ||
| const path = require('path'); | ||
| const webpack = require('webpack'); | ||
| const DefinePlugin = require('webpack/lib/DefinePlugin'); | ||
| const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); | ||
|
|
||
| let config = require('./webpack.config.js'); | ||
| const helpers = require('./webpackHelpers')(path.resolve(__dirname, '<%- relativePath %>')); | ||
|
|
||
| const ENV = process.env.ENV = process.env.NODE_ENV = 'production'; | ||
| const HMR = helpers.hasProcessFlag('hot'); | ||
|
|
||
| /** | ||
| * Devtool | ||
| * Reference: https://webpack.js.org/configuration/devtool/ | ||
| * Type of sourcemap to use per build type | ||
| */ | ||
| Object.assign(config, { | ||
| devtool: 'source-map' | ||
| }); | ||
|
|
||
|
|
||
| /** | ||
| * Add additional plugins to the compiler. | ||
| * | ||
| * See: http://webpack.github.io/docs/configuration.html#plugins | ||
| */ | ||
|
|
||
| /** | ||
| * Plugin: DefinePlugin | ||
| * Description: Define free variables. | ||
| * Useful for having development builds with debug logging or adding global constants. | ||
| * | ||
| * Environment helpers | ||
| * | ||
| * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin | ||
| */ | ||
| // NOTE: when adding more properties make sure you include them in custom-typings.d.ts | ||
| config.plugins.push( | ||
| new DefinePlugin({ | ||
| 'ENV': JSON.stringify(ENV), | ||
| 'HMR': HMR, | ||
| 'process.env': { | ||
| 'ENV': JSON.stringify(ENV), | ||
| 'NODE_ENV': JSON.stringify(ENV), | ||
| 'HMR': HMR, | ||
| } | ||
| }) | ||
| ); | ||
|
|
||
| /** | ||
| * Plugin LoaderOptionsPlugin (experimental) | ||
| * | ||
| * See: https://gist.github.com/sokra/27b24881210b56bbaff7 | ||
| */ | ||
| let loaderOptions = { | ||
| debug: false, | ||
| minimize: true, | ||
| options: Object.assign({}, config.loaderOptions) | ||
| let configOptions = { | ||
| metaData: { | ||
| title: 'Confit Sample Project', | ||
| baseUrl: '/', | ||
| ENV: process.env.ENV = process.env.NODE_ENV = 'production', | ||
| jsSourceMap: 'source-map', | ||
| cssSourceMap: false, | ||
| }, | ||
| loaderOptions: { | ||
| debug: false, | ||
| minimize: true | ||
| } | ||
| }; | ||
| // END_CONFIT_GENERATED_CONTENT | ||
|
|
||
| delete config.loaderOptions; // Remove the property so that config is valid | ||
|
|
||
| let loaderOptionsPlugin = new LoaderOptionsPlugin(loaderOptions); | ||
|
|
||
| config.plugins.push(loaderOptionsPlugin); | ||
|
|
||
| // START_CONFIT_GENERATED_CONTENT | ||
| let config = require('./webpack.config.js').mergeConfig(configOptions); | ||
| // END_CONFIT_GENERATED_CONTENT | ||
|
|
||
| module.exports = config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
lib/buildTool/webpack/buildBrowser/templates/webpack.finalize.config.js.tpl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| /** Finalise Config START */ | ||
| /** | ||
| * Add additional plugins to the compiler. | ||
| * | ||
| * See: http://webpack.github.io/docs/configuration.html#plugins | ||
| */ | ||
|
|
||
| /** | ||
| * Plugin: DefinePlugin | ||
| * Description: Define free variables. | ||
| * Useful for having development builds with debug logging or adding global constants. | ||
| * | ||
| * Environment helpers | ||
| * | ||
| * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin | ||
| */ | ||
| // NOTE: when adding more properties make sure you include them in custom-typings.d.ts | ||
| const DefinePlugin = require('webpack/lib/DefinePlugin'); | ||
|
|
||
| let definePlugin = new DefinePlugin({ | ||
| 'ENV': JSON.stringify(METADATA.ENV), | ||
| 'HMR': METADATA.HMR, | ||
| 'process.env': { | ||
| 'ENV': JSON.stringify(METADATA.ENV), | ||
| 'NODE_ENV': JSON.stringify(METADATA.ENV), | ||
| 'HMR': METADATA.HMR, | ||
| } | ||
| }); | ||
|
|
||
| config.plugins.push(definePlugin); | ||
|
|
||
| /** | ||
| * Plugin LoaderOptionsPlugin (experimental) | ||
| * | ||
| * See: https://gist.github.com/sokra/27b24881210b56bbaff7 | ||
| */ | ||
| const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); | ||
|
|
||
| let loaderOptionsPlugin = new LoaderOptionsPlugin(LOADER_OPTIONS); | ||
|
|
||
| config.plugins.push(loaderOptionsPlugin); | ||
| /* **/ |
Oops, something went wrong.