webpack打包vue组件,import获取的值为空

发布于 2022-09-11 22:19:48 字数 2911 浏览 9 评论 0

用vue打包了一个vue组件库
结果import该组件库的时候,只是空的/undefined

使用文件index.js

import Vue from 'vue'
import { registerStory } from './index'
import components from '../lib/index.min'

console.log(components, require('../lib/index.min'))
// 输出结果为 undefined , Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}

引入的结果是空的

main.js 入口文件

import tempButton from './components/temp-button'
import helloBeehive from './components/hello-beehive'

export default {
    version: '1.0.0',
    helloBeehive,
    tempButton
}

webpack.config

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const styleLoader = require('./style-loader')
const path = require('path')
const pkg = require('../package.json')

const lowercamelcase = str => str.replace(/-(\w)/g, (m, l) => l.toUpperCase())
const resolve = _path => path.join(__dirname, '../', _path)

module.exports = {
    mode: 'production',
    entry: resolve('./src/main.js'),
    output: {
        path: resolve('./lib'),
        filename: 'index.min.js',
        chunkFilename: '[id].js',
        library: lowercamelcase(pkg.name),
        libraryTarget: 'umd',
        libraryExport: 'default',
        globalObject: "typeof self !== 'undefined' ? self : this"
    },
    externals: {
        vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
        }
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src')
        }
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'img/[name].[hash:8].[ext]'
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)?$/,
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: 'media/[name].[hash:8].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:8].[ext]'
                }
            },
            ...styleLoader
        ]
    },
    plugins: [new CleanWebpackPlugin(), new VueLoaderPlugin()]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文