Understanding npm Dependency Management and Building a Publishable npm Package with Webpack

Background : npm installs dependencies in a flattened node_modules structure, which can cause version conflicts when multiple packages require different versions of the same library, such as prop-types and react . The article illustrates how npm resolves these conflicts and why the flattening process can be time‑consuming.

npm vs. cnpm vs. yarn : npm downloads packages from the official registry, which can be slow in China; cnpm provides a mirror of npmjs.org . Yarn also uses a remote registry but adds a local cache and offline mode, making installations faster and more reliable.

History of package managers : From the early days of manual dependency handling, npm was released in 2010, gained rapid adoption, faced competition from Bower, and evolved through features like shrinkwrap , package-lock.json , and npm ci . Yarn entered the scene in 2016, offering deterministic lockfiles and faster installs.

Essential package.json fields :

name : lowercase, single‑word identifier (dashes and underscores allowed).

version : semantic version x.x.x with range specifiers ( ~ , ^ , * , > , >= , <= , < ).

description , main , scripts , repository , keywords , author , license , devDependencies , dependencies .

Using nrm to manage registries :

npm install nrm -g   // install nrm globally
nrm ls                // list all registries
nrm use <registry>    // switch registry
nrm add <registry> <url> // add a new registry
nrm del <registry>   // delete a registry

Prerequisites for building a package : Basic knowledge of Webpack configuration or willingness to study the official documentation.

Step‑by‑step build process :

Generate package.json with npm init .

Add dependencies: npm install <package> -S for production or -D for development.

Create webpack.config.js (example below).

Add an entry file src/index.js (e.g., console.log('test my npm!') ).

Run npm run build to produce dist/test.js .

Update package.json main field to point to the built file.

Example webpack.config.js :

module.exports = {
  entry: {
    test: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'umd',
    library: 'test',
    libraryExport: 'default',
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: ['@babel/preset-env']
        }
      }]
    }]
  }
};

Sample package.json after configuration:

{
  "name": "npmtestlkz",
  "version": "1.0.0",
  "main": "dist/test.js",
  "author": "likaizhu",
  "license": "MIT",
  "description": "a demo for test npm",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": ["demoTest"]
}

Publishing process :

nrm use npm   // switch to npm registry
npm login    // authenticate
npm publish  // publish the package

Important notes: ensure the package name is unique on npm, verify your account email, and be aware of environment variables (use .env with cross-env and dotenv-webpack ) and code compilation (Babel for ES6 features).

References and further reading are provided at the end of the article.