淘先锋技术网

首页 1 2 3 4 5 6 7

webpack 文档（指南）- 创建 library

有些时候，我们可能需要制作自己的一个 JS 库。webpack 有提供相应的功能。

创建一个 library

首先准备要被打包成“库”的文件。将某个 id 为 app 的元素的内容变成 MyLibaray ，并打印出 lodash 是什么。

基本的目录结构如下：

在这里插入图片描述

index.css

.lib-box {
    color: red;
    text-align: center;
    background-color:green;
}

index.html

index.js

// 这里没有用到 lodash ， 只是为了测试引入第三方模块
import 'lodash';
import './index.css';
import * as module from './index.html';
var elem = document.getElementById('app');
elem.onclick = function () { 
    this.innerHTML = module.default;
    // 打印 lodash
    console.log(_);
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].js',
        // 库的名字
        library:'MyLibaray',
        // 暴露库的方式，还有 var 、 this 和 window
        // var - 这个要用 scirpt标签 的 src 去引入，然后直接全局访问 MyLibaray
        // this - 通过 this['MyLibaray'] 访问，用标签引入时，和 var 表现一致
        // window - 通过window["MyLibaray"] 访问，只用于有 window 的环境
        // umd - 可以使用 require 函数引入，意味着也可以使用 import 引入
        // （最终都会变成 webpack 的 __webpack_require__ )
        libraryTarget: 'umd'
    },
    // 第三方模块不打包到库中
    externals: {
      lodash: {
          // commonjs 使用 require('lodash') 引入 lodash
          commonjs: 'lodash',
          // commonjs2 使用 require('lodash') 引入 lodash
          commonjs2: 'lodash',
          // 全局模式直接使用 _ 访问 lodash 即可
          root: '_'
      }  
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.html$/,
            use: ['html-loader']
        }]
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

打包后的代码片段：

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("lodash"));
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["MyLibaray"] = factory(require("lodash"));
	else
		root["MyLibaray"] = factory(root["_"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_lodash__) {
    return (
        // ..
    );
}

这里发现还保留着 require 函数，是为了能在 cmd 和 amd 中的模块中引入使用。如果另一个模块引入了这个库，并且又使用 webpack 打了一次包，那么这里的 require 函数又会变成 webpack 的 _webpack_require_ 函数。

再改一下 package.json 的 main 属性。

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "./dist/index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack"
  }
}

使用创建的库

测试项目的基本目录：

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width:200px;
            height:200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

index.js

import './lib';
console.log('index.js');

打包后，借助 Live Server 运行一下打包后的 index.html 。

在这里插入图片描述

点击一下绿色的区域后：
在这里插入图片描述

将库发布到 NPM 包管理平台

略…