1、项目搭建
1)项目初始化安装依赖
npm init -y
npm i webpack webpack-cli lodash -D
2)配置webpack
- 将项目中使用lodash也打包进项目中,增大了项目的体积(不推荐)
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: 'webpack-numbers.js',
library: {
name: 'webpackNumbers',
type: 'umd',
},
},
}
- 将lodash等第三方包外部化,由用户安装(推荐)
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: 'webpack-numbers.js',
library: {
name: 'webpackNumbers',
type: 'umd',
},
},
externals: {
lodash: {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_',
},
},
}
3)配置npm script并打包构建
"build": "webpack --config webpack.config.js"
同时将package.json
文件中main
设置为打包构建的文件
"main": "dist/webpack-numbers.js",
2、发布流程
1)将npm的registry设置为官方的仓库(我们需要将包发布到官方仓库)
- 不能发布到
taobao,taobao
镜像是只读镜像,会发布失败 - 若要发布的私服,需要将仓库地址设置为私服地址
npm config get registry
npm config set registry https:
npm config set registry https:
2)在终端中登录npm
npm login
输入用户名、密码和邮箱登录npm
3)发布library到npm
npm logout
npm who am i
npm unpublish <pkg>[@<version>]
npm unpublish 01-custom-library-npm@1.0.1
3、更新包
- 1、修改完包的代码后,还需要更新下
package.json
中的version
(不能和之前的版本相同) - 2、已经登录过了,只需使用发布命令
npm publish
更新包
4、发布注意问题
- 1、必须将
registry
设置为官方仓库,否则发布失败 - 2、每次修改后重新发布,需要修改
package.json
中的版本号
5、测试
- CommonJS:在test文件夹下创建test.js,可以使用node去运行代码
const webpackNumbers = require('../dist/webpack-numbers')
console.log(webpackNumbers.numToWord(3));
- script 标签测试:在test文件夹下创建index.html
<body>
<script src="../dist/webpack-numbers.js"></script>
<script>
console.log(webpackNumbers);
</script>
</body>
5、webpack支持es模块引入