@zero-version/dynamic-webpack.cli

Create a webpack.config.js file for a CLI or a library with correct bundling and other config.

Usage no npm install needed!

<script type="module">
  import zeroVersionDynamicWebpackCli from 'https://cdn.skypack.dev/@zero-version/dynamic-webpack.cli';
</script>

README

Create a webpack.config.js file for a CLI or a library with correct bundling and other config.

Usage

dynamic-webpack builds a basic webpack config file which automatically bundles any private dependencies, or explicit dependencies (documented in a string array in a bundle.json file).

Usage: dynamic-webpack [options]

Create a webpack.config.js file for a CLI or a library with correct bundling and other config.

Options:
  -V, --version           output the version number
  -d, --projectDir <dir>  The project directory (default: `process.cwd()`)
  -t, --type <type>       type ("cli" or "lib")
  -h, --help              display help for command

Library

This is an example webpack.config.js after running the command dynamic-webpack -t lib:

const path = require('path');
const tsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const includes = require('lodash/includes');
const startsWith = require('lodash/startsWith');

const bundle = [
  // This will be any private dependency, or any dependency explicitly documented in a `bundle.json` file.
];

module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, 'src', 'index.ts'),
  output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js', libraryTarget: 'commonjs2' },
  module: { rules: [{ test: /.ts$/, exclude: /node_modules/, use: [{ loader: 'ts-loader', options: { transpileOnly: true } }] }] },
  resolve: { plugins: [new tsConfigPathsPlugin()], extensions: ['.mjs', '.js', '.json', '.ts'] },
  target: 'node',
  externals: [
    ({ request }, callback) => {
      const isEntry = path.resolve(request) === path.resolve(__dirname, 'src', 'index.ts');
      const isRelative = startsWith(request, '.');
      const isBundle = includes(bundle, request);
      const isExternal = !isEntry && !isRelative && !isBundle;
      isExternal ? callback(null, 'commonjs ' + request) : callback();
    },
  ],
  stats: 'errors-only',
};

CLI

This is an example webpack.config.js after running the command dynamic-webpack -t cli:

const path = require('path');
const tsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const includes = require('lodash/includes');
const startsWith = require('lodash/startsWith');
const webpack = require('webpack');

const bundle = [
  // This will be any private dependency, or any dependency explicitly documented in a `bundle.json` file.
];

module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, 'src', 'index.ts'),
  output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js', libraryTarget: 'commonjs2' },
  module: { rules: [{ test: /.ts$/, exclude: /node_modules/, use: [{ loader: 'ts-loader', options: { transpileOnly: true } }] }] },
  resolve: { plugins: [new tsConfigPathsPlugin()], extensions: ['.mjs', '.js', '.json', '.ts'] },
  plugins: [new webpack.BannerPlugin({ banner: '#!/usr/bin/env node', raw: true })],
  target: 'node',
  externals: [
    ({ request }, callback) => {
      const isEntry = path.resolve(request) === path.resolve(__dirname, 'src', 'index.ts');
      const isRelative = startsWith(request, '.');
      const isBundle = includes(bundle, request);
      const isExternal = !isEntry && !isRelative && !isBundle;
      isExternal ? callback(null, 'commonjs ' + request) : callback();
    },
  ],
  stats: 'errors-only',
};

Support ☕

Are you using a package I've developed and finding it useful? Or have you looked at one of my repositories and learnt something new? If so, please consider buying me a coffee. Thanks!