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

@nitro/webpack

v9.4.0

Published

nitro webpack

Downloads

844

Readme

npm version License Build Status

Nitro Webpack

Configurable and easy to use webpack 4 config for nitro projects.

Usage

const options = {
    rules: {
        js: true,
        ts: false,
        scss: true,
        hbs: true,
        woff: true,
        font: false,
        image: true,
    },
    features: {
        banner: true,
        bundleAnalyzer: false,
        theme: false,
        dynamicAlias: false,
    },
};
const webpackConfig = require('@nitro/webpack/webpack-config/webpack.config.dev')(options);

module.exports = webpackConfig;

Configuration

Rules

No loader rule is enabled by default. Activate following prepared rules you need in options.rules

options.rules.js

  • Type: boolean || object
  • default: false
  • file types: js, jsx, mjs

Config:

  • true or {} activates JavaScript support

options.rules.ts

  • Type: boolean
  • default: false
  • file types: ts, tsx

Config:

  • true will activate TypeScript support

options.rules.scss

  • Type: boolean || object
  • default: false
  • file types: scss, css

Config:

  • true or {} will activate scss support
  • { publicPath: '../' } provide a separate public path for stylesheets. By default, webpack uses the value from 'output.publicPath'. (only relevant for production build)
  • { implementation: require('node-sass') } gives the possibility to use 'node-sass' as sass implementation. (you have to add 'node-sass' as a dev-dependency in your project)
  • { sassOptions: { ... } } gives the possibility to add options for the 'dart-sass' or 'node-sass' implementation (e.g. ignore some deprecations for dart-sass with silenceDeprecations: [...])

options.rules.hbs

  • Type: boolean || object
  • default: false
  • file types: hbs

Config:

  • true or {} will activate handlebars precompiled templates support
  • { include: [] } additionally adds include config to rule
  • { exclude: [] } additionally adds exclude config to rule

options.rules.woff

  • Type: boolean || object
  • default: false
  • file types: woff, woff2

Config:

  • true or {} will activate woff font support (in CSS files)
  • { include: [] } additionally adds include config to rule
  • { exclude: [] } additionally adds exclude config to rule

options.rules.font

  • type: boolean || object
  • default: false
  • file types: eot, svg, ttf, woff, woff2

Config:

  • true or {} will activate font support for eot, svg, ttf, woff & woff2 fonts (in CSS files)
  • { include: [] } additionally adds include config to rule
  • { exclude: [] } additionally adds exclude config to rule

⚠ Please use this rule with care. You have to configure includes and exclude when you also use woff and/or image loader. Otherwise, svg or woff files are processed with multiple configurations.

options.rules.image

  • Type: boolean || object
  • default: false
  • file types: png, jpg, gif, svg

Config:

  • true will activate image support
  • { include: [] } additionally adds include config to rule
  • { exclude: [] } additionally adds exclude config to rule

options.features

Enable some additional features

options.features.banner

  • Type: boolean
  • default: true

(only relevant for production build)

true will add a text banner with infos from package.json to the bundled js & css

options.features.bundleAnalyzer

  • Type: boolean
  • default: false

true will add the bundleAnalyser plugin and opens a browser window with the stats

options.features.theme

  • Type: string || false
  • default: false

A string will activate theming support:

  • webpack uses ./src/ui.${theme} as entrypoint (instead of ./src/ui)
  • a subfolder within assets is used for the output path and publicPath (/assets/${theme}/)

It makes sense to use a dynamic value e.g. an environment variable, as shown in the example configuration.

options.features.dynamicAlias

  • Type: object || false
  • default: false

A proper configured dynamicAlias feature will activate the DynamicAliasResolverPlugin which can change import paths in source files dynamically on compile time as desired.

Properties:

  • options.features.dynamicAlias.search (string || RegExp) search term to be replaced (e.g. '/theme/light')
  • options.features.dynamicAlias.replace (string) string as replacement (e.g. /theme/${theme})

Extending Configuration

Code Splitting

By default, all js imports from 'node_modules' are extracted to a 'vendors.js' to use in your view files.

Dynamically imported js files will be extracted to public/js/dynamic/. You may use them in a promise chain.

import('package-name').then((pack) => {
  // do something with 'pack'
});

import(
  /* webpackChunkName: "mychunk" */ 'package-name'
).then((pack) => {
  // do something with 'pack'
});

You may change the default configuration in webpackConfig.optimization.splitChunks

Changelog

Recent changes can be viewed on Github on the Releases Page