如何使用webpack打包一个库library-创新互联
这篇文章给大家分享的是有关如何使用webpack打包一个库library的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联是专业的柳林网站建设公司,柳林接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行柳林网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!初始化库
mkdir library cd library npm init -y
经过以上步骤后会生成一个library文件夹,里面包含一个package.json文件。然后简单修改为如下所示:
{ "name": "library", "version": "1.0.0", "description": "", "main": "./dist/library.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "rocky", "license": "MIT" }
简单创建几个文件
在根目录下新建src文件夹,新建一个math.js和string.js。相关文件内容如下:
// math.js export function add(a,b){ return a+b; } export function minus(a,b){ return a-b; } export function multiply(a,b){ return a*b; } export function division(a,b){ return a/b; }
// string.js export function join(a,b){ return a+" "+b; }
继续新建一个index.js
import * as math from "./math"; import * as string from "./string"; export default {math,string}
简单安装webpack依赖
npm install webpack webpack-cli --save
安装的同时,可以创建webpack配置文件webpack.config.js,如下配置:
const path = require("path"); module.exports={ mode:"production", entry:"./src/index.js", output:{ path:path.resolve(__dirname,"dist"), filename:"library.js", library:"library",// 在全局变量中增加一个library变量 libraryTarget:"umd" } }
安装成功后,执行打包命令
npm run build
之后会在根目录下生成一个dist文件夹,里面包含一个library.js。
如何使用呢?
如果别人要使用这个打包后的library.js的话,可能会有如下几种方式:
// es6方式 import library from "library" // commonjs方式 const library=require("library") // AMD方式 require(["library"],function(){}) // script标签引入
在dist文件夹里创建一个index.html,用script引入之前打包生成的library.js。浏览器打开index.html,在控制台中输入library,会得到如下所示的结果:
一个简单的库便打包生成了。
注解:webpack中libraryTarget配置项可以设为umd,表示采用umd规范,如果设置为this,表示在this下挂载了一个library变量。更多用法可参考webpack官网。
引入别的库用法
假设需要引入lodash.安装lodash
npm install lodash --save
修改之前创建的string.js
import _ from "lodash"; export function join(a,b){ // return a+" "+b; return _.join([a,b]," "); }
运行打包命令,发现打包出来的库体积变大了,因为我们引入了lodash,导致包变大。怎么办呢?修改webpack配置文件。
增加一个externals配置项:
const path =require("path"); module.exports={ mode:"production", entry:"./src/index.js", externals:["lodash"],// 配置不打包文件 output:{ path:path.resolve(__dirname,"dist"), filename:"library.js", library:"library", libraryTarget:"umd" } }
之后打包就会发现库的体积又变小了。
感谢各位的阅读!关于“如何使用webpack打包一个库library”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前名称:如何使用webpack打包一个库library-创新互联
网址分享:http://myzitong.com/article/dooeco.html