Webpack打包库和组件

需求

- 打包一个压缩版，一个非压缩版
- 支持AMD引入：require(['库'],function(库名){ //在此使用 })
- 支持CJS引入：const 库名 = require('库') // 在此使用
- 支持ESM引入：import 库名 from '库'
- 支持script引入

打包并暴露

- 配置webpack.config.js
- entry配置打包的入口文件以及别名，可配置压缩版名称和非压缩版名称
- output配置打包生成的文件名称filename，使用[name]来对应别名
- libraryTarget：'umd' // 文件的引入方式，umd支持所有的引入方式
- library：'库名'
- libraryExport: 'default' // 文件为默认导出，在引入时直接使用别名即可，而无需通过别名.default

对压缩版的文件进行压缩

- 配置mode为none，将默认的压缩关闭
- 使用TerserPlugin来针对具体文件进行压缩
- 配置optimization选项，开启minimize，在minimizer数组中配置插件
- 具体配置方法查看插件文档

设置库被引用时的入口文件

- 在package.json中配置main，将指定文件作为入口文件(习惯为index)
- 在index文件中进行判断process.env.NODE_ENV(对应webpack.config.js中的mode)
- 在package.json中配置prepublish钩子，为webpack，则会在发布前自动打包项目

发布到npm

- 注册npm账号
- npm login 登陆账号
- npm publish