Estoy tratando de configurar la aplicación vue usando webpack.
Este es mi archivo webpack.config.js:
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" }) ] };Y este es el archivo de entrada:
import {createApp} from 'vue'; import { createStore } from 'vuex' const _ = require('lodash')En mi layout.html llamo global.entry.js como tal:
<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>Luego trato de usar vue en 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);Pero en la consola de Chrome decía que createApp no está definido. Pero si solo ejecuto el código lodash, lodash funciona bien. No puedo entender lo que hice mal. Cualquier ayuda sería muy útil.