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()]
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论