账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack打包vue组件,import获取的值为空
    17
    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()]
    }
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 人间人 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部