Integrate Webpack 4 tooling into latest FSA Style codebase

[bignamehere]

The FSA Style codebase currently being used in the Webpack and Webpack 4 (WP4) initiative is severely out of date/sync with the current FSA Style codebase. A new branch is needed that runs Webpack 4 as the tooling setup.

Steps to take:

• Clone new FSA Style repo into new directory WP4

• Checkout webpack/wp4

• Open old FSA Style directory

• Pull down fresh version of FSA Style

• Checkout Develop

• Delete node_modules directory

• Delete Gruntfile.js

• Copy content of package.json from WP4 dir to current package.json

• Create `index.js' file in src directory

• In WP4, Copy index.js file from src directory into current src directory

• In index.js file comment out or delete import './js/fsa-style-docs.js';

• In WP4, Copy the 4 files below into the current project

  • postcss.config.js
  • webpack.common.js
  • webpack.dev.js
  • webpack.prod.js

• run yarn install or npm install

• run yarn build or npm build

• run yarn start or npm start

[bignamehere]

@francisrupert I was able to get version 2.1.4 working with Webpack 4 with the above listed steps. You can either perform those actions or should just be able to pull down feature/wp4 branch, delete your node_modules, then perform the yarn install, yarn build, and yarn start.

I highly recommend using yarn, as it takes about 1/4 of the time. Let me know if you run into any issues.

[bignamehere]

In theory, you could utilize the same Webpack config and project structure that the ProtoKit uses to create a new FSA Style using for Webpack.

[bignamehere]

didn't mean to close

[whatnextjamie]

@bignamehere is this an old issue that should be closed?

[bignamehere]

@whatnextjamie yep, that’s no longer going to be relevant with Vite.JS being a better option.