webpack如何打包一个公共库呢，有兴趣的童鞋请往下冲~~

一、创建项目

新建项目文件夹，文件夹下创建src文件夹，src文件夹中创建index.js和other.js。

index.js:

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

初始化生成package.json:

npm init -y

安装webpack和webpack-cli：

npm i webpack@4 webpack-cli@4.8.0

根目录下创建webpack.config.js：

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

打包:

npx webpack

二、指定库及其规范

output配置项的library可指定库名称，libraryTarget指定库的规范。

webpack.config.js文件配置如下：

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
    library: "myLibrary", // 指定库的名称
    libraryTarget: "umd" // 打包规范，umd比较通用，支持多种环境。还有很多其他属性值: var/window/global/umd/commonjs/this
  },
  mode: "production"
};

三、提供压缩版本和未压缩版本

压缩版本：production
未压缩版本：development 由于原本只能根据mode配置项指定的模式对打包的代码进行压缩或不压缩，而不能同时生成一个压缩版本和一个未压缩版本，所以我们要想办法解决这个问题。

为了打包能生成两个文件，我们要配置两个入口文件：

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

由于我们设置了mode为production，所以此时打包出来两个一样的压缩文件：

由于mode配置项不能让我们同时获得一个压缩版本和一个未压缩版本，所以毫无用处，我们将其设置为none。

mode: "none",

借助terser-webpack-plugin插件实现压缩安装插件：

npm i --save terser-webpack-plugin@4.2.3

注意，这里使用webpack4需要安装terser-webpack-plugin4版本。如果webpack5则安装terser-webpack-plugin5版本。

//优化配置项
  optimization: {
    minimize: true, // 开启压缩
    minimizer: [
      // 压缩配置
      new terserplugin({
        // 使用插件
        test: /\.min\.js/
      })
    ]
  }

4.配置用户使用库入口以及使用的文件

package.json文件中配置入口文件main字段：

"main": "index.js",

根目录下新增入口文件index.js:

根据用户的环境匹配对应的文件版本

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

发布到npm

npm publish

在项目中安装使用库新创建一个测试项目，安装库：

npm i --save my-public-library

创建./src/index.js使用库:

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

打印出一个module，即返回过来的是一个模块:

使用库中的add方法时，需要写add.default。

公共库导出默认函数而不是模块配置output.libraryExport为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", // 指定库的名称
    libraryTarget: "umd", // 打包规范，umd比较通用，支持多种环境。还有很多其他属性值: var/window/global/umd/commonjs/this
    libraryExport: "default" // 导出默认函数而不是模块
  },
  mode: "none",
  //优化配置项
  optimization: {
    minimize: true, // 开启压缩
    // 压缩配置
    minimizer: [
      // 使用插件：匹配.min.js文件
      new terserplugin({
        test: /\.min\.js/
      })
    ]
  }
};

再次打包，修改版本号并发布到npm上。

测试项目中重新安装新版本的公共库，打包，打印出add方法：

webpack打包公共库

一、创建项目

二、指定库及其规范

三、提供压缩版本和未压缩版本