vueuse / vue-demi

🎩 Creates Universal Library for Vue 2 & 3
MIT License
3k stars 159 forks source link

Any webpack example? #81

Closed mokone91 closed 3 years ago

mokone91 commented 3 years ago

Hi! im working on components lib and truing to make it vue2/3 compatible using this solution. But i faced with issue with vue3 installation.. in vue2 env everything working fine! Here is my build webpack config:

import merge from 'webpack-merge';
import { Configuration } from 'webpack';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import common from './webpack.base.config';
const { watch } = require('minimist')(process.argv.slice(2));

const path = require('path');

export default merge<Configuration>(common, {
  entry: {
    main: './src/index.ts',
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      name: 'TestLib',
      type: 'umd',
    },
  },
  devtool: 'source-map',
  mode: watch ? 'development' : 'production',
  bail: watch ? false : true,
  plugins: [
    new CleanWebpackPlugin(),
  ],
  externals: {
    vue: 'vue',
    'vue-demi': 'vue-demi',
    'lodash': 'lodash',
  },
});

on client side im using default vue-cli-service serve^ without additional settings but in vue3 environment i got: image

seems problem somewhere near webpack build config, maybe somebody can share some webpack config examples? Thanks!

mokone91 commented 3 years ago

upd: Originally components lib done in vue2, if i change my dev deps like:

  -"@vue/composition-api": "^1.0.4",
  +"@vue/compiler-sfc": "^3.1.5",
  -"vue": "^2.6.4",
  +"vue": "^3.1.5",
  -"vue-loader": "^15.9.6",
  +"vue-loader": "^16.3.3",
  -"vue-template-compiler": '2.6.14',

Its going to work in vue3 env, but broken in vue2 with: image

seems like vue bundled in even if i put it to externals

upd: as i can see in bundle analyzer - there is vue-style-loader bundled only image

upd: After removing all 'scoped' keywords start getting next error: image