I'm trying to setup vue app using webpack.
This is my webpack.config.js file:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
"Shared/global": './ClientApp/src/js/Shared/global.js',
},
output: {
filename: 'js/[name].entry.js',
path: path.resolve(__dirname, 'dist'),
publicPath: ""
},
devtool: 'source-map',
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'],
},
{
test: /\.(eot|woff(2)?|ttf|otf|svg)$/i,
type: 'asset'
},
{
test: /\.js$/,
use: {
loader: "babel-loader",
},
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css"
})
]
};
And this is the entry file:
import {createApp} from 'vue';
import { createStore } from 'vuex'
const _ = require('lodash')
In my layout.html I call global.entry.js as such:
<body>
<div id="layoutApp">
<h1>HELLO</h1>
</div>
</body>
<script type="module" src="/dist/js/Shared/global.entry.js" defer></script>
<script src="/ClientApp/src/js/Shared/layout.js" defer></script>
Then I try to use vue in layout.js:
const layoutApp = createApp({
mounted(){
console.log("layout is mounted VUE")
},
});
layoutApp.mount("#layoutApp")
var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
console.log(other);
But in chrome console it said createApp is not defined. But if I run only lodash code, lodash works fine. I cant figure out what I did wrong. Any help would be very helpful