Skip to content

Collection of decorators for a quick tune webpack 5.

License

Notifications You must be signed in to change notification settings

AndTem/webpackon

Repository files navigation

Webpackon

Webpackon - this is a collection of decorators for a quick tune webpack 5.

JS

TypeScript

Optimization

CSS

HTML

Fonts

Images

React

Utils

Example

Full examples are here

React with babel example

webpack.config.js

const path = require('path');

const { compose } = require('@webpackon/core');
const { useTs } = require('@webpackon/use-ts');
const { useReactRefresh } = require('@webpackon/use-react-refresh');
const { useHtml } = require('@webpackon/use-html');
const { useBabel } = require('@webpackon/use-babel');
const { useCss } = require('@webpackon/use-css');
const { useFonts } = require('@webpackon/use-fonts');
const { useUrlImages } = require('@webpackon/use-url-images');
const { useDevServer } = require('@webpackon/use-dev-server');
const { useOptimization } = require('@webpackon/use-optimization');

module.exports = (_, { mode }) =>
  compose(
    useReactRefresh({ mode }),
    useHtml({
      mode,
      templatePath: path.resolve(__dirname, 'public', 'index.html'),
    }),
    useBabel({ useTs: true }),
    useTs(),
    useCss({ mode }),
    useFonts(),
    useUrlImages({ mode }),
    useDevServer({ mode }),
    useOptimization({
      mode,
      splitChunkCacheGroups: [
        { chunkName: 'react', includePackages: ['react', 'react-dom'] },
      ],
    })
  )({
    target: 'web',
    entry: path.resolve(__dirname, 'src', 'index.tsx'),
  });

Result:

About

Collection of decorators for a quick tune webpack 5.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published