CIC Webpack Config Factory

A single webpack configuration for CIC projects

Supported CMS

• October
• Wordpress

Install Instructions

1. yarn add cic-webpack-config-factory
2. If there is any existing webpack config files, delete them
3. If there is not any existing webpack config files, create a folder for them
4. Copy the contents of the samples folder into your now empty webpack config folder
5. There is at least one change that needs to be made to the config.js template to set it up for your project, so be sure you give it more attention other than a copy-paste.
6. Add a babel preset to package.json if it is not already there

  "babel": {
    "presets": [
      "react-app"
    ]
  },

7. Add a browserlist definition to package.json if it is not already there

"browserslist": [
  "defaults"
],

8. If the project uses a .browserlistrc file, remove it
9. If the project uses @babel/polyfill replace it with core-js
10. Update your scripts in package.json if needed to use the new config

Migrating babel polyfill to core-js

Babel polyfill has been deprecated in favor of including core-js. Babel polyfill used core-js under the hood, so the migration process is very straightforward.

import "@babel/polyfill";

becomes

import "core-js/stable";

Sample package.json scripts

"scripts": {
  "dev": "NODE_ENV=development WEBPACK_DEV_SERVER=true webpack-dev-server --config config/webpack/dev.conf.js",
  "watch": "NODE_ENV=development webpack --watch --bail --config config/webpack/prod.conf.js",
  "build": "NODE_ENV=production webpack --bail --config config/webpack/prod.conf.js",
}

Testing Changes

1. In this project, run yarn link
2. In an October or Wordpress project, run yarn link cic-webpack-config-factory
3. Test changes