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

@digitize/webpack-config

v0.1.5

Published

This package is intended to help bootstrap your Webpack config.

Downloads

9

Readme

webpack-config

Summary

This package is intended to help bootstrap and easily edit your Webpack config. I created it when I got annoyed reading webpack documenation every time I bootstrap a new project or need to update the configuration of the existing one.

How it works?

Call the exported function webpackConfig() with simple set of options (description TBD) and it will return a webpack configuration object which you can export from your webpack.config.js to build a project with minimum efforts.

The in-depth documentation is on the way. In the meantime please read through the source code.

webpackConfig(options)
  • options webpack target configuration options (see below)

Returns webpack target

Options

options.entry string, required.

Relative path to webpack target entry point. The value of this options is passed to webpack target entry property as is. See webpack docs for details

options.target "web" | "node" = "web"

Type of target. This value is copied to target property of resulting webpack target config. Besides that, it has several other side effects:

  • "web" in this type of target you can specify dependencies to be excluded from the output bundle using options.externals property.
  • "node" automatically excludes all node_modules from output bundle using webpack-node-externals library. See options.whitelistNodeModules for details on whitelisting some modules if needed. Also, sets config.node = {__dirname: false} to preserve __dirname constant values. See node.__dirname config for details.

options.output object

Determines where to store resulting bundles.

options.output.path string, required = "dist"

The output directory path relative to CWD (current working directory).

options.output.filename string, required = "index.js"

Name of main output bundle e.g. "index.js"

otions.jsx boolean = false

Supports JSX files. Currently only works in TypeScript mode

options.ts boolean = true

If set to true, webpack is configured to build a TypeScript project, e.g. compile .ts/.tsx files using awesome-typescript-loader

options.style object, optional

If specified, webpack is configured to process .css files using css-loader plugin. By default bundle file will contain code that will automatically insert compiled styles into DOM when needed. As a result, all CSS styles will be packed into the same bundle with the rest of the code.

options.style.type "css" | "scss" = "css"

If set to "scss", webpack is configured to process .scss files using sass-loader plugin.

options.style.extract string, optional

Name for extracted CSS style bundle. If specified, all CSS styles will be extract to a separated bundle file e.g. "style.css" and you would have to reference this bundle from your HTML code manually.

options.style.omit boolean = false

If set to true, will ignore any .css/.scss files. This option is useful if you want to build SSR (server-side rendering) application on the backend side but don't want to compile same style twice in both client and server targets

options.whitelistNodeModules Array, optional.

This options determines the node_modules which should not be excluded from output bundle in case of "node" target type. See webpack-node-externals options.allowlist documentation for details.

options.copy object, optional

This options allows to copy certain files to output folder "as is". Expected value is a hash map where keys represent from property and values could be either to strings or pattern objects with from property omitted. Example:

webpackConfig({
    // ...
    copy: {
        "./ssl/server.{crt,key}": {to: "./ssl", flatten: true},
        "./firebase/firebase-admin-cert.json": "./"
    }
});

options.externals object, optional

Hash map of dependencies which need to be excluded from the bundle. This options is available only for "web" targets and is handy when you want to include 3rd party (vendor) dependencies from CDN as already built assets. Under the hood it utilizes webpack config externals property in the following way (using string values):

    {
        ...
        externals: [options.externals]
    }

Known issues

  • jsx only works in ts mode e.g. when options.ts === true