使用webpack相关库模式打包编译
修改打包入口、package.json文件;涉及到打包输入输出,编译上传发布
const webpackConfig = merge(baseWebpackConfig, {
mode: 'production',
module: {
rules: cssLoader.styleLoaders({
sourceMap: config.cssSourceMap
})
},
devtool: false,
entry: path.resolve(__dirname, '../lib/index.js'), // 打包入口文件地址
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'upload-ui.js',
library: 'upload-ui', //模块名称
libraryTarget: 'umd', //输出格式
umdNamedDefine: true //是否把模块名作为AMD输出的命名空间
},
externals: { // Vue组件库只提供组件,Vue文件自身需要组件库使用者在项目中自行引入,库中无需打包。所以我们可以把Vue加到externals中。
vue: 'vue'
},
plugins: [
// 设置默认环境变量
new webpack.DefinePlugin({
'process.env': env_build
}),
]
})
package.json 文件配置,只显示了部分重要的
{
"name": "vue-upload-ui",
"version": "1.1.5", // 注意每次发布npm,版本号不能重复
"description": "上传upload-ui层组件",
"author": "",
"private": false, // 是否私有,必须指定为false才能发布到npm
"main": "./dist/upload-ui.js", // 编译后包的入口文件
"scripts": {
"dev": "webpack-dev-server --open 'Google Chrome' --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js build"
},
"dependencies": { // 业务依赖
},
"files": [ // 发布需上传的文件
"lib",
"dist"
],
"devDependencies": { // 开发依赖
},
}