webpack library篇|博客系列 | 前端进阶之旅

# 一、webpack-numbers案例

这里我也不折腾了, 就以官网提供的案例进行讲解吧.

首先让我们明确要做什么事情.

本地编写创建一个名为lindaidai-webpack-numbers的项目(也就是library)
这个library的功能是导出两个方法, 能实现数字与字符串的互相转换
library中用到了lodash这个工具库
将library打包发布到NPM上, 其它用户能够通过npm install的方式下载使用
外部化lodash, 也就是我们library虽然使用了lodash, 但是并不要将它打包到我们的bundle中
用户能通过ES2015模块, CommonJS模块, script脚本引入我们的library并使用它

该 library 的使用方式如下：

// ES2015模块引入
import * as webpackNumbers from 'lindaidai-webpack-numbers'
// CommonJS模块引入
var webpackNumbers = require('lindaidai-webpack-numbers')

// ES2015模块和CommonJS模块都是这样调用的:
webpackNumbers.numToWord(2)

// AMD模块引入
require(['lindaidai-webpack-numbers'], function (webpackNumbers) {
  // AMD 模块调用
  webpackNumbers.wordToNum('Two');
})

@前端进阶之旅: 代码已经复制到剪贴板

用户还可以通过 script 标签来加载和使用此 library：

<!doctype html>
<html>
  ...
  <script src="https://unpkg.com/lindaidai-webpack-numbers"></script>
  <script>
    // ...
    // 全局变量
    webpackNumbers.wordToNum('Five')
    // window 对象中的属性
    window.webpackNumbers.wordToNum('Five')
    // ...
  </script>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

# 创建library的项目结构

让我们使用webpack快速的构建一个本地的library.

由于有了之前webpack的基础, 我相信你构建起来应该也会很快.

mkdir lindaidai-webpack-numbers && cd lindaidai-webpack-numbers
npm init -y
cnpm i --save-dev webpack webpack-cli lodash
touch webpack.config.js
mkdir src && cd src
touch index.js
touch ref.json