webpack制作自己的JS库

    前端组件化、模块化已经成为一个前端开发者必备的技能，之前做了APP的组件化模块化后。萌生了将web、H5也进行了组件化，之后发现的很多工具rollup、Parcel.js、grunt、webpack等，最后选择的webpack.

    也许其他我了解的不深。但我觉得webpack相对来说是很全面的一个工具

闲话不多说，

第一步：基础环境配置

node.js、npm安装

直接去官网下载安装即可

开发工具：webstrom2018 || sublime 两者选其一。建议sublime,可以更深入的了解环境配置，webstrom2018 集成了webpack功能，可以直接使用

第二步

新建项目：makeMyLibrary

打开终端，cd  makeMyLibrary目录

输入 npm init 

直接回车就可以了，

初始化的内容

"dependencies": {

"babel-core":"^6.26.0",

"babel-loader":"^7.1.4",

"babel-plugin-add-module-exports":"^0.2.1",

"babel-preset-env":"^1.6.1",

"eslint":"^3.9.1",

"eslint-loader":"^1.6.1",

"lodash":"^4.16.6",

"webpack":"^4.4.1",

"webpack-cli":"^2.0.12"

}

这是打包需要用到的包加入文件

注意：webpack 尽量选择4.x.x版本，4.0之前不需要装webpack-cli ,4.0后需要安装webpack-cli。虽然多装了一个，但是很少会发生一些莫名其妙的错误

在根目录创建webpack.config.js

webpack.config.js

关于webpack.config.js 会后续开一篇讲

创建完成后，在package.json中添加执行JS的语句

package.json

根目录创建src文件，创建index.js

执行npm i

文件目录结构

index中 可以定义一些接口方法

如：

export function paly(callback){

    callback()

}

还记得package.json中添加的scripts吗？

npm run buildLibrary

文件目录

lib.js就是我们最终打包出来的库，打包出来其实有很多种，关于这点官网有很明确的说明 https://www.webpackjs.com/guides/author-libraries/

PS:  这些只是webpack简单的使用，网上很多关于webpack 的内容，我只是强迫自己写一下，加深一下记忆，中间有很多坑走过才能明白，

    错误的地方还望大家指出 谢谢！