前端组件化、模块化已经成为一个前端开发者必备的技能，之前做了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 的内容，我只是强迫自己写一下，加深一下记忆，中间有很多坑走过才能明白，
错误的地方还望大家指出 谢谢！
网友评论