How to use makeWebpackConfig method in Cypress

...14const DEFAULT_RULES_LENGTH = 2;15const DEFAULT_EXCLUDE_LENGTH = 2;16const customUse = [{ loader: 'other-loader', options: { foo: 'bar' } }];17describe('makeWebpackConfig', () => {18  const defaultConfig = makeWebpackConfig();19  const newRules = [{ test: /\.js$/, use: [{ loader: 'other-loader' }] }];20  it('Rules include js and css by default', () => {21    expect(defaultConfig.module.rules.length).toBe(DEFAULT_RULES_LENGTH);22    expect(defaultConfig.module.rules[0]).toEqual(makeJS());23    expect(defaultConfig.module.rules[1]).toEqual(makeCSS());24  });25  it('Passing ts: true adds default typescript', () => {26    const config = makeWebpackConfig({ ts: true });27    expect(config.module.rules.find(rule => rule.test.test('.tsx'))).toEqual(makeTS());28  });29  it('Passing ts object adds custom typescript config', () => {30    const ts = { test: /\.tsx?$/, foo: 'bar' };31    const config = makeWebpackConfig({ ts });32    expect(config.module.rules.find(rule => rule.test.test('.tsx'))).toEqual(ts);33  });34  it('passing ts adds extensions to resolve', () => {35    const config = makeWebpackConfig({ ts: true });36    expect(config.resolve.extensions).toEqual(['.ts', '.tsx', '.js', '.json']);37  });38  it('User can add to `rules` array', () => {39    const config = makeWebpackConfig({40      rules: [...defaultWebpackRules, ...newRules],41    });42    const { rules } = config.module;43    expect(rules.length).toBe(DEFAULT_RULES_LENGTH + 1);44    expect(rules[rules.length - 1]).toEqual(...newRules);45  });46  it('User can overwrite `rules` array', () => {47    const config = makeWebpackConfig({48      rules: newRules,49    });50    expect(config.module.rules.length).toBe(1);51    expect(config.module.rules).toEqual(newRules);52  });53  it('User can update JS', () => {54    const js = makeJS({ use: customUse });55    const config = makeWebpackConfig({ js });56    expect(config.module.rules[0]).toEqual(js);57    // Should not affect other rules58    expect(config.module.rules[1]).toEqual(makeCSS());59    expect(config.module.rules.length).toBe(2);60  });61  it('User can update CSS', () => {62    const css = makeCSS({ use: customUse });63    const config = makeWebpackConfig({ css });64    expect(config.module.rules[1]).toBe(css);65    // Should not affect other rules66    expect(config.module.rules[0]).toEqual(makeJS());67    expect(config.module.rules.length).toBe(2);68  });69  it('default config', () => {70    expect(defaultConfig).toEqual({71      mode: 'development',72      target: 'web',73      module: {74        rules: [75          {76            exclude: [/\.json$/, /node_modules/],77            test: /\.jsx?$/,78            use: [79              {80                loader: 'babel-loader',81                options: {82                  plugins: ['@babel/plugin-proposal-class-properties'],83                  presets: ['@babel/preset-env', '@babel/preset-react'],84                },85              },86            ],87          },88          {89            test: /\.s?css$/,90            use: [91              { loader: 'style-loader' },92              { loader: 'css-loader', options: { modules: true } },93              { loader: 'sass-loader' },94            ],95          },96        ],97      },98    });99  });100  describe('config options', () => {101    const testObject = { foo: 'bar' };102    it.each`103      option            | value104      ${'mode'}         | ${'production'}105      ${'target'}       | ${'node'}106      ${'devtool'}      | ${'source-map'}107      ${'node'}         | ${testObject}108      ${'entry'}        | ${testObject}109      ${'serve'}        | ${testObject}110      ${'stats'}        | ${testObject}111      ${'watch'}        | ${testObject}112      ${'output'}       | ${testObject}113      ${'plugins'}      | ${testObject}114      ${'resolve'}      | ${testObject}115      ${'externals'}    | ${testObject}116      ${'devServer'}    | ${testObject}117      ${'experiments'}  | ${testObject}118      ${'performance'}  | ${testObject}119      ${'optimization'} | ${testObject}120      ${'watchOptions'} | ${testObject}121    `('User can update $option', ({ option, value }) => {122      const config = makeWebpackConfig({ [option]: value });123      expect(config[option]).toBe(value);124    });125  });126});127describe('makeJS', () => {128  const DEFAULT_JS_USE_LENGTH = 1;129  const customPresets = ['@babel/some-preset'];130  const customPlugins = ['@babel/some-plugin'];131  it('Has babel-loader as default config', () => {132    const js = makeJS();133    expect(js.use.length).toBe(DEFAULT_JS_USE_LENGTH);134    expect(js.use.some(rule => rule.loader === 'babel-loader')).toBe(true);135  });136  it('Default JS test handles .js and .jsx', () => {...

...18	process.env.NODE_ENV = process$env$nodeEnv;19});20it('should return a development config', () => {21	const env = 'development';22	const config = makeWebpackConfig(styleguideConfig, env);23	const errors = validate(config);24	expect(errors).toHaveLength(0);25	const plugins = getClassNames(config.plugins);26	expect(plugins).toContain('HotModuleReplacementPlugin');27	if (isWebpack4) {28		expect(config).toMatchObject({29			mode: env,30		});31		expect(config).not.toHaveProperty('optimization');32	} else {33		expect(plugins).not.toContain('UglifyJsPlugin');34	}35});36it('should return a production config', () => {37	const env = 'production';38	const config = makeWebpackConfig(styleguideConfig, env);39	const errors = validate(config);40	expect(errors).toHaveLength(0);41	const plugins = getClassNames(config.plugins);42	expect(plugins).toContain('CleanWebpackPlugin');43	expect(plugins).not.toContain('HotModuleReplacementPlugin');44	expect(config).toMatchObject({45		output: {46			filename: expect.stringContaining('[chunkhash'),47			chunkFilename: expect.stringContaining('[chunkhash'),48		},49	});50	if (isWebpack4) {51		expect(config).toMatchObject({52			mode: env,53		});54		expect(getClasses(config.optimization.minimizer, 'UglifyJsPlugin')).toHaveLength(1);55	} else {56		expect(plugins).toContain('UglifyJsPlugin');57	}58});59it('should set aliases', () => {60	const result = makeWebpackConfig(styleguideConfig, 'development');61	expect(result.resolve.alias).toMatchSnapshot();62});63it('should prepend requires as webpack entries', () => {64	const result = makeWebpackConfig(65		{ ...styleguideConfig, require: ['a/b.js', 'c/d.css'] },66		'development'67	);68	expect(result.entry).toMatchSnapshot();69});70it('editorConfig theme should change alias', () => {71	const highlightTheme = 'solarized';72	const result = makeWebpackConfig(73		{ ...styleguideConfig, editorConfig: { theme: highlightTheme } },74		'development'75	);76	expect(result.resolve.alias['rsg-codemirror-theme.css']).toMatch(highlightTheme);77});78it('should use editorConfig theme over highlightTheme', () => {79	const highlightTheme = 'solarized';80	const result = makeWebpackConfig({ ...styleguideConfig, highlightTheme }, 'development');81	expect(result.resolve.alias['rsg-codemirror-theme.css']).toMatch(theme);82});83it('should enable verbose mode in CleanWebpackPlugin', () => {84	const result = makeWebpackConfig({ ...styleguideConfig, verbose: true }, 'production');85	expect(getClasses(result.plugins, 'CleanWebpackPlugin')).toMatchSnapshot();86});87it('should merge user webpack config', () => {88	const result = makeWebpackConfig(89		{ ...styleguideConfig, webpackConfig: { resolve: { alias: { foo: 'bar' } } } },90		'development'91	);92	expect(result.resolve.alias).toMatchSnapshot();93});94it('should not owerwrite user DefinePlugin', () => {95	const result = makeWebpackConfig(96		{97			...styleguideConfig,98			webpackConfig: {99				plugins: [100					new webpack.DefinePlugin({101						'process.env.PIZZA': JSON.stringify('salami'),102					}),103				],104			},105		},106		'development'107	);108	// Doesn’t really test that values won’t be overwritten, just that109	// DefinePlugin is applied twice. To write a real test we’d have to run110	// webpack111	expect(getClasses(result.plugins, 'DefinePlugin')).toMatchSnapshot();112});113it('should update webpack config', () => {114	const extensions = ['.web.js', '.js'];115	const result = makeWebpackConfig(116		{117			...styleguideConfig,118			dangerouslyUpdateWebpackConfig: c => {119				c.resolve.extensions = extensions;120				return c;121			},122		},123		'development'124	);125	expect(result.resolve.extensions).toEqual(extensions);126});127it('should pass template context to HTML plugin', () => {128	const template = {129		pizza: 'salami',130	};131	const result = makeWebpackConfig(132		{133			...styleguideConfig,134			template,135		},136		'development'137	);138	expect(getClasses(result.plugins, 'MiniHtmlWebpackPlugin')[0]).toMatchObject({139		options: {140			context: template,141			template: expect.any(Function),142		},143	});144});145it('should pass template function to HTML plugin', () => {146	const template = () => '<html />';147	const result = makeWebpackConfig(148		{149			...styleguideConfig,150			template,151		},152		'development'153	);154	expect(getClasses(result.plugins, 'MiniHtmlWebpackPlugin')[0]).toMatchObject({155		options: {156			context: expect.any(Object),157			template,158		},159	});160});161it('should update NODE_ENV', () => {162	process.env.NODE_ENV = '';163	makeWebpackConfig(styleguideConfig, 'production');164	expect(process.env.NODE_ENV).toBe('production');165});166it('should not overwrite NODE_ENV', () => {167	makeWebpackConfig(styleguideConfig, 'production');168	expect(process.env.NODE_ENV).toBe(process$env$nodeEnv);169});170it('should pass specified mountPointId to HTML plugin', () => {171	const result = makeWebpackConfig(172		{173			...styleguideConfig,174			mountPointId: 'foo-bar',175		},176		'development'177	);178	expect(getClasses(result.plugins, 'MiniHtmlWebpackPlugin')[0].options.context.container).toEqual(179		'foo-bar'180	);...

1import last from 'lodash/last';2import styleguidist from '../index';3jest.mock('../build');4jest.mock('../server');5const getDefaultWebpackConfig = () => styleguidist().makeWebpackConfig();6const cwd = process.cwd();7afterEach(() => {8	process.chdir(cwd);9});10it('should return API methods', () => {11	const api = styleguidist(require('../../test/data/styleguide.config.js'));12	expect(api).toBeTruthy();13	expect(typeof api.build).toBe('function');14	expect(typeof api.server).toBe('function');15	expect(typeof api.makeWebpackConfig).toBe('function');16});17describe('makeWebpackConfig', () => {18	it('should return development Webpack config', () => {19		const api = styleguidist();20		const result = api.makeWebpackConfig('development');21		expect(result).toBeTruthy();22		expect(result.output.filename).toBe('build/[name].bundle.js');23		expect(result.output.chunkFilename).toBe('build/[name].js');24	});25	it('should return production Webpack config', () => {26		const api = styleguidist();27		const result = api.makeWebpackConfig('production');28		expect(result).toBeTruthy();29		expect(result.output.filename).toBe('build/bundle.[chunkhash:8].js');30		expect(result.output.chunkFilename).toBe('build/[name].[chunkhash:8].js');31	});32	it('should merge webpackConfig config option', () => {33		const defaultWebpackConfig = getDefaultWebpackConfig();34		const api = styleguidist({35			webpackConfig: {36				resolve: {37					extensions: ['.scss'],38				},39			},40		});41		const result = api.makeWebpackConfig();42		expect(result).toBeTruthy();43		expect(result.resolve.extensions.length).toEqual(44			defaultWebpackConfig.resolve.extensions.length + 145		);46		expect(last(result.resolve.extensions)).toEqual('.scss');47	});48	it('should merge webpackConfig but ignore output section', () => {49		const defaultWebpackConfig = getDefaultWebpackConfig();50		const api = styleguidist({51			webpackConfig: {52				resolve: {53					extensions: ['.scss'],54				},55				output: {56					filename: 'broken.js',57				},58			},59		});60		const result = api.makeWebpackConfig();61		expect(result.output.filename).toEqual(defaultWebpackConfig.output.filename);62	});63	it('should merge webpackConfig config option as a function', () => {64		const api = styleguidist({65			webpackConfig: env => ({66				_env: env,67			}),68		});69		const result = api.makeWebpackConfig();70		expect(result).toBeTruthy();71		expect(result._env).toEqual('production');72	});73	it('should apply updateWebpackConfig config option', () => {74		const defaultWebpackConfig = getDefaultWebpackConfig();75		const api = styleguidist({76			dangerouslyUpdateWebpackConfig: (webpackConfig, env) => {77				webpackConfig.resolve.extensions.push(env);78				return webpackConfig;79			},80		});81		const result = api.makeWebpackConfig();82		expect(result).toBeTruthy();83		expect(result.resolve.extensions.length).toEqual(84			defaultWebpackConfig.resolve.extensions.length + 185		);86		expect(last(result.resolve.extensions)).toEqual('production');87	});88	it('should merge Create React App Webpack config', () => {89		process.chdir('test/apps/basic');90		const api = styleguidist();91		const result = api.makeWebpackConfig();92		expect(result).toBeTruthy();93		expect(result.module).toBeTruthy();94	});95	it('should add webpack entry for each require config option item', () => {96		const modules = ['babel-polyfill', 'path/to/styles.css'];97		const api = styleguidist({98			require: modules,99		});100		const result = api.makeWebpackConfig();101		expect(result.entry).toEqual(expect.arrayContaining(modules));102	});103	it('should add webpack alias for each styleguideComponents config option item', () => {104		const api = styleguidist({105			styleguideComponents: {106				Wrapper: 'styleguide/components/Wrapper',107				StyleGuideRenderer: 'styleguide/components/StyleGuide',108			},109		});110		const result = api.makeWebpackConfig();111		expect(result.resolve.alias).toMatchObject({112			'rsg-components/Wrapper': 'styleguide/components/Wrapper',113			'rsg-components/StyleGuide/StyleGuideRenderer': 'styleguide/components/StyleGuide',114		});115	});116});117describe('build', () => {118	it('should pass style guide config and stats to callback', () => {119		const config = {120			components: '*.js',121		};122		const callback = jest.fn();123		const api = styleguidist(config);124		api.build(callback);...

...31gulp.task('env', () => {32  const env = args.production ? 'production' : 'development';33  process.env.NODE_ENV = env; // eslint-disable-line no-undef34});35gulp.task('build-webpack-production', webpackBuild(makeWebpackConfig(false)));36gulp.task('build-webpack-dev', webpackDevServer(makeWebpackConfig(true)));37gulp.task('build-webpack', [args.production38  ? 'build-webpack-production'39  : 'build-webpack-dev'40]);41gulp.task('build', ['build-webpack']);42gulp.task('eslint', () => {43  return runEslint();44});45gulp.task('eslint-ci', () => {46  // Exit process with an error code (1) on lint error for CI build.47  return runEslint().pipe(eslint.failAfterError());48});49gulp.task('karma-ci', (done) => {50  runKarma({singleRun: true}, done);...

1const projectConfig     = require('../../config'),2      makeWebpackConfig = require('../webpack/make-config'),3      KARMA_ENTRY_FILE  = 'karma.entry.js';4const WEBPACK_CONFIG = makeWebpackConfig(5  require('../webpack/client')()6);7function makeDefaultConfig () {8  const preprocessors = {};9  preprocessors[KARMA_ENTRY_FILE] = ['webpack'];10  preprocessors[projectConfig.SRC_DIRNAME + '/**/*.js'] = ['webpack'];11  return {12    files : [13      './node_modules/phantomjs-polyfill/bind-polyfill.js',14      './' + KARMA_ENTRY_FILE15    ],16    frameworks : ['chai', 'mocha'],17    preprocessors : preprocessors,18    reporters : ['spec'],...

...9  }10  if (fs.existsSync(".static")) {11    fs.rmSync(".static", { recursive: true });12  }13  const wpConfig = makeWebpackConfig({14    production: true,15  });16  const wpServerConfig = makeWebpackConfig({17    server: true,18  });19  compile([wpConfig, wpServerConfig])20    .then(() => {21      if (fs.existsSync(".static")) {22        const buildTemplate = require("../.static/server/index.js").default;23        buildTemplate();24      }25      console.log("Success! Compiled in `build` folder");26    })27    .catch((err) => {28      console.error(err);29    });30}...

...4const path = require('path');5const makeWebpackConfig = require('./webpack.config');6const isDevelopment = process.env.NODE_ENV === 'development';7gulp.task('script', () => {8  const webpackConfig = makeWebpackConfig({9    isDevelopment10  });11  let pipeline = gulp.src('./assets/javascripts/index.js');12  if(isDevelopment) {13    pipeline = pipeline.pipe(plumber());14  }15  return pipeline16    .pipe(webpack(webpackConfig))17    .pipe(gulp.dest('./source/javascripts'));...

1const makeWebpackConfig = require('react-devpack').makeWebpackConfig;2module.exports = makeWebpackConfig({3  entry: './demo/index',4  resolve: {5    alias: {6      'dev/raphael.core.js': './dev/raphael.core.js',7      'raphael.core': './raphael.core.js',8      'raphael.svg': './dev/raphael.svg.js',9      'raphael.vml': './dev/raphael.vml.js',10    },11  },...