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

用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()]
}
阅读 3.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题