Any webpack example?

[mokone91]

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:

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

[mokone91]

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:

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

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

[antfu]

I don't have much experience for configuring Webpack, so I might not be able to help. Since this lib works fine in Vue CLI, I think it does not have compatibility issues with Webpack. Converted to discussion if any one want to help.

[mokone91]

Hi, have found prev conversation #65
seems problem can't be solved by simple config fix, as im truing to make it work with regular template section

[mokone91]

just wondering now is its possible to replace vue render function with h-demi somewhere in the middle of webpack build

[mokone91]

so, decided to make 2 builds with only difference in vue-loader(15/16)