Webpack how to pack a public library, interested in children’s shoes please go down ~~

Create a project

1. Create a new project folder and create under the foldersrcFolder,srcCreate in folderindex.jsandother.js.

index.js:

export default function add(a, b) {
    return a + b;
}
Copy the code

2. Initialize to package.json:

npm init -y
Copy the code

3. Install webpack and webpack- CLI:

NPM I [email protected] webpack @ 4Copy the code

4. Create webpack.config.js from the root directory:

const path = require("path");
module.exports = {
  entry: "./src/index.js".output: {
    filename: "[name].js".path: path.resolve(__dirname, "./dist"),},mode: "production"
};
Copy the code

5. Packaging:

npx webpack
Copy the code

Designated libraries and their specifications

The library of the output configuration item specifies the library name, and the libraryTarget specifies the library specification.

The webpack.config.js file is configured as follows:

const path = require("path");
module.exports = {
  entry: "./src/index.js".output: {
    filename: "[name].js".path: path.resolve(__dirname, "./dist"),
    library: "myLibrary".// Specify the name of the library
    libraryTarget: "umd" // Package specification, UMD is more general, support a variety of environments. There are many other attribute values: var/window/global/umd/commonjs/this
  },
  mode: "production"
};
Copy the code

Three, provide compressed version and uncompressed version

• Compressed version: Production
• Uncompressed version: Development

Since the packaged code can only be compressed or uncompressed according to the mode specified by the mode configuration item, rather than generating a compressed and uncompressed version at the same time, we need to solve this problem.

1. To generate two files for packaging, we need to configure two entry files:

entry: {
    "add": "./src/index.js"."add.min": "./src/index.js",},Copy the code

Since we set mode to production, we now package two identical compressed files:

2. Due to themodeThe configuration item does not allow us to get a compressed and uncompressed version at the same time, so it is useless, so we set it tonone.

mode: "none".Copy the code

3. Compression is implemented with the Terser-webpack-plugin plug-in

Install plug-in:

NPM - I save [email protected]Copy the code

Note that the terser-webpack-plugin4 version is required to use Webpack4 here. If webpack5, install the Terser-webpack-plugin5 version.

// Optimize configuration items
  optimization: {
    minimize: true.// Enable compression
    minimizer: [
      // Compress the configuration
      new terserplugin({
        // Use plugins
        test: /\.min\.js/}})]Copy the code

4. Configure the library entry and files for users to use

Package. json configuration entry file main field:

"main": "index.js".Copy the code

Add the entry file index.js to the root directory:

Match the file version based on the user’s environment

if (process.env.NODE_ENV == "production") {
  module.exports = require("./umd/add.min.js");
} else {
  module.exports = require("./umd/add.js");
}
Copy the code

5. Published to the NPM

npm publish
Copy the code

6. Install the usage libraries in your project

Create a new test project and install the library:

npm i --save my-public-library
Copy the code

Create./ SRC /index.js library:

const add = require("my-public-library");
console.log(add);
Copy the code

Print a module, that is, return a module:

When using the add method in the library, you need to writeadd.default.

7. The public library exports default functions instead of modules

Set output.libraryExport to default:

const path = require("path");
const terserplugin = require("terser-webpack-plugin");
module.exports = {
  entry: {
    add: "./src/index.js"."add.min": "./src/index.js"
  },
  output: {
    filename: "[name].js".path: path.resolve(__dirname, "./umd"),
    library: "myLibrary".// Specify the name of the library
    libraryTarget: "umd".// Package specification, UMD is more general, support a variety of environments. There are many other attribute values: var/window/global/umd/commonjs/this
    libraryExport: "default" // Export default functions instead of modules
  },
  mode: "none".// Optimize configuration items
  optimization: {
    minimize: true.// Enable compression
    // Compress the configuration
    minimizer: [
      // Use plugins: match.min.js files
      new terserplugin({
        test: /\.min\.js/}}})];Copy the code

Package again, change the version number, and publish to NPM.

Re-install the new version of the public library in the test project, package it, and print the Add method: