Cet article présente principalement le principe et la mise en œuvre de la bibliothèque d'empaquetage du module d'organisation webpack. Maintenant, je le partage avec vous et le donne comme référence.
Un article précédent a analysé les principes de base du packaging des modules JS par Webpack. Le cas présenté est la situation la plus courante, c'est-à-dire que plusieurs modules JS et un module d'entrée sont regroupés dans un fichier bundle, qui peut être directement exécuté. par un navigateur ou autre moteur JavaScript, cela équivaut à une compilation directe pour générer un fichier exécutable complet. Cependant, il existe une autre situation très courante : nous souhaitons créer et publier une bibliothèque JavaScript. Par exemple, si vous publiez votre propre bibliothèque dans la communauté npm, Webpack a besoin d'une configuration correspondante et le code compilé sera légèrement différent. .
Comme l'article précédent, cet article analyse principalement le code généré de Webpack, et le combine pour expliquer le rôle spécifique des options de configuration de la bibliothèque de Webpack lors de la compilation de la bibliothèque. La documentation officielle correspondante est ici.
Bibliothèque pour écrire du JS
Commençons par un cas simple Nous écrivons simplement une bibliothèque simple util.js :
import $ from 'jquery' function sayHello() { console.log("Hello"); } function hideImages() { $('img').hide(); } export default { sayHello: sayHello, hideImages: hideImages }
// 入口文件 entry: { util: './util.js', } // 输出文件 output: { path: './dist', filename: '[name].dist.js' }
(function(modules) { var installedModules = {}; function webpack_require(moduleId) { // ... } return webpack_require('./util.js'); }) ({ './util.js': generated_util, '/path/to/jquery.js': generated_jquery });
module.exports = (function(modules) { var installedModules = {}; function webpack_require(moduleId) { // ... } return webpack_require('./util.js'); }) ({ './util.js': generated_util, '/path/to/jquery.js': generated_jquery });
// 入口文件 output: { path: './dist', filename: '[name].dist.js', library: 'util', libraryTarget: commonjs2 }
var (默认值,发布为全局变量) commonjs commonjs2 amd umd
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') // commonjs2 module.exports = factory(); else if(typeof define === 'function' && define.amd) define("util", [], factory); // amd else if(typeof exports === 'object') exports["util"] = factory(); // commonjs else root["util"] = factory(); // var }) (window, function() { return (function(modules) { var installedModules = {}; function webpack_require(moduleId) { // ... } return webpack_require('./util.js'); }) ({ './util.js': generated_util, '/path/to/jquery.js': generated_jquery }); }