Introduction

silence-cli provides a set of commands and options to create and customize webpack projects.

Install

npm install silence-cli --save-dev

yarn add silence-cli --dev

pnpm install silence-cli -D

Usage

configuration file

Create a file named silence.config.js or silence.config.ts in the root directory of the project:

import { defineConfig } from "silence-cli";
import { fileURLToPath } from "node:url";

export default defineConfig({
    entry: fileURLToPath(new URL("./src/main.ts", import.meta.url)),
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url))
        }
    },
    devServer: {
        hot: true,
        open: true,
        historyApiFallback: true
    },
    framework: "vue",
    css: {
        preprocessor: "sass"
    }
});

This configuration file can be CommonJS or ESM.

command

development

silence dev --host 0.0.0.0 --port 8080 --config silence.config.ts

production

silence build --config silence.config.ts

Config options

assets

type: Array<Asset> Handle resource modules.

Asset

A set of options for one resource module.

suffixes

type: string[] An array storing resource suffixes, for example ["png", "jpg"].

type

type: "url" | "raw" | "base64" | "auto" default: "url" Compile resource files into different output formats.

outputName

type: string default: [hash][ext][query] Output name of resource file during building.

base

type: string default: "/" The public base path for developing or producing environmental services.

css

preprocessor

type: "less" | "sass" | "none" default: "none"

output

filename

type: string default: "css/index.css" The output file name corresponding to the CSS entry file.

chunkFilename

type: string default: "css/[name].css" The output chunk name corresponding to the CSS chunk file.

devServer

webpack-dev-server.

entry

webpack entry.

externals

webpack externals.

framework

type: "vue" | "react" default: undefined The purpose is to load different loaders and plugins based on different frameworks.

htmlTemplate

path

type: string default: "./index.html" The path of the root HTML in the project.

outputName

type: string default: "index.html" The output name of the root html.

inject

type: "body" | "head" default: "body" The position to insert the entry file into the HTML.

output

webpack output.

optimization

splitChunks

webpack splitChunks.

plugins

webpack plugins.

resolve

alias

webpack alias.