npm run build 后打包出的dist文件夹我要怎么配置才能让下载的人引入的文件是dist里的文件呢?
我的package.json文件:
{
"name": "element-navmenu_vue",
"version": "1.0.0",
"description": "基于vue框架elemntUI组件库二次封装的无限下级递归菜单栏",
"main": "src/index.js",
"module": "src/index.js",
"scripts": {
"build": "webpack"
},
"files": [
"dist/",
"src/"
],
"repository": {
"type": "git",
"url": "https://github.com/github-cherry/element-navmenu_vue"
},
"keywords": [
"vue",
"elementUI",
"NavMenu",
"el-menu",
"无限下级菜单",
"递归菜单",
"导航菜单"
],
"homepage": "https://github.com/github-cherry/element-navmenu_vue#readme",
"author": "quanyi",
"license": "MIT",
"bugs": "https://github.com/github-cherry/element-navmenu_vue/issues",
"unpkg": "dist/index.js",
"jsdelivr": "dist/index.js",
"dependencies": {
"vue-fragment": "^1.6.0",
"webpack": "^5.88.1"
},
"devDependencies": {
"compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.8.1",
"style-loader": "^3.3.3",
"vue-loader": "^15.10.1",
"webpack-cli": "^5.1.4"
}
}
我的webpack.config.js文件:
const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
],
},
plugins: [new VueLoaderPlugin(), new CompressionWebpackPlugin()],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
library: 'NavMenu', // 全局挂载包的引用名
libraryTarget: 'umd', //通用模式:支持用户通过es、common.js、AMD的方式引入npm包
globalObject: 'this' // 为 webpack 4 新增属性,需要指定 global 的值为 ’this‘,否则会为默认值 ’self‘,无法在 nodejs 环境中使用。
}
}
互关