npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

policygenius-fannypack

v0.1.1

Published

Universal plug-and-play webpack configuration

Downloads

60

Readme

fannypack

Universal plug-and-play webpack configuration

The problem

At Policygenius, we have a number of different frontend apps that all use the same stack and build tools, however, there is very little commonality among them. In addition, when we build need frontend services, we would like to have certain components already built out so we can a) start coding sooner and b) maintain a set of standards across the team. Since we have decided that Webpack will be our primary bundle builder, it only follows that we should have a standard, reusable configuration for all of our applications.

This solution

fannypack seeks to create a base-line Webpack configuration that would be able to work right out of the box for any frontend application. It can also allow for a certain set of options to tweak a few more specific parts of the configuration, along with the ability to manually override if necessary. With fannypack, we can maintain one set of dependencies and configuration that will be applied to a number of repositories.

Install

yarn add --dev policygenius-fannypack

Usage

Here is an example implementation in a webpack.config.js file:

const fannypack = require('policygenius-fannypack');

const config = fannypack.baseConfig({
  name: 'some-widget',
  baseDirectoryPath: './src',
  buildDirectoryPath: './build',
});

module.exports = config;

API

Configs

baseConfig

This provides a baseline configuration with everything needed to create a basic Webpack bundle.

devConfig

This adds live reloading and sourcemaps onto the baseConfig. Runs Webpack in development mode.

prodConfig

This adds production optimizations for JavaScript and CSS onto the baseConfig. Runs Webpack in production mode.

Runners

runWebpack

This provides a function that takes in a valid webpack configuration and uses the Webpack Node API to build assets.

Usage:

const { runWebpack } = require('policygenius-fannypack');
const validConfig = require('path/to/config');

runWebpack(validConfig);

You MUST use this runner to build production ready assets. If you try to build using the Webpack CLI and fannypack's prodConfig, you will run into Module Concatenation issues, causing your bundle to be larger than necessary. It is also recommended to use this when building development assets that will not be served immediately. You do not, and should not, need to use this with webpack-dev-server; use that CLI as is with the appropriate config.

Options

name

string | defaults to: 'app'

This provides a name for the final bundled javascript along with namespacing for any built CSS files.

baseDirectoryPath

string | defaults to: '__dirname/src'

This provides a path for which Webpack to resolve all imports and locate the default entry file (baseDirectoryPath + index.js). You must provide a valid path.

buildDirectoryPath

string | defaults to: '__dirname/public/build'

This provides a path for which Webpack to output all built files. You must provide a valid path.

port

number | defaults to: 8080

This provides the port number from which the dev server will serve content.

typescript

boolean | defaults to: false

If you are using typescript, pass this property in as true to enable appropriate loader and babel preset.

htmlPluginOptions

If you want to override the default HTMLWebpackPlugin, this option provides a seamless way for updating the configuration to fit your needs.

htmlPluginOptions.eject

boolean | defaults to: false

Removes the HTMLWebpackPlugin completely if it is not needed for your build process.

htmlPluginOptions.config

object | defaults to: { filename: 'index.html', template: '{baseDirectoryPath}/index.html'}

Configuration to override default HTMLWebpackPlugin. See plugin docs for valid configuration.

processEnvVariables

object | defaults to: {}

Configuration for any process.env variables you want to expose to your app at run time. Will be passed to the webpack.DefinePlugin config.

cssDisabled

boolean | defaults to: false

Disables all CSS loaders completely if they are not needed for your build process.

disableExtractTextPlugin

boolean | defaults to: false

Disabled the ExtractTextPlugin loaders completely if they are not needed for your build process.

Override Webpack

Here is an example implementation of overriding default Webpack configurations:

const fannypack = require('policygenius-fannypack');

const config = fannypack.baseConfig({
  name: 'some-widget',
  baseDirectoryPath: './src',
  buildDirectoryPath: './build',
  processEnvVariables: {
    'some-env-variable': JSON.stringify(proces.env['some-env-variable']),
  }
});

module.exports = {
  ...config,
  entry: 'some-new-file',
  output: {
    path: 'a-different-path',
  },
  plugins: [
    ...config.plugins,
    new PluginToAdd(),
  ]
};

In short, you can override any of the Fannypack default configurations, partially or fully, by building a new object with the imported Fannypack configuration and adding on valid Webpack options. Please consult the Webpack documentation for a full list of configuration options.

Using CSS Modules

fannypack comes set up with the necessary loader/configuration to use CSS Modules if desired. In order to make use of this configuration, your SCSS files must have the extension module.scss. In addition, Fannypack assumes that you have a global SCSS file for all of your CSS Modules files that will provide helper methods, styles, etc. You MUST create a file with path ${options.baseDirectoryPath}/styles/assets/global_css_module.scss for Fannypack to properly compile your SCSS files that you want to be modularized.

Hot Reloading

fannypack comes built in with the correct babel plugins and options to allow for Hot Reloading in React. To complete the set up, use the following configuration in your top level component (the one you pass to ReactDOM.render):

  import React from 'react';
  import { hot } from 'react-hot-loader';

  class App extends React.Component {
    // Some component code...
  }

  export default module(hot)(App);

For this to work, ensure that you have downloaded the latest version of react-hot-loader. For additional troubleshooting, please consult react-hot-loader docs.

Dependencies

In order to have Fannypack work correctly in your project, you will need to install all of the necessary dependencies into your project, including Webpack, loaders and plugins. Fannypack uses Webpack 4, so ensure to have that version installed and all dependencies that work with that version.

Local Development

In Fannypack, run the following:

  • yarn clean && yarn build
  • yarn link

This will use Rollup to create the bundled javascript containing the 3 exportable configurations and runner. Then yarn will create a linked module.

In your applicaion, run:

  • yarn link policygenius-fannypack

This will link your app's version of fannypack to the local build.

If you make any updates to Fannypack while working, you will need to rerun the build command above.