export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘解决

webpack: 是代码编译工具，有入口、出口、loader 和插件。
webpack: 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

刚接触不久webpack这方面的总是会面临遇到各种哪个的bug和问题，搜集网上的资料，>少的可怜,刚出茅庐的自己很难找到解决的方案，总之会花费大部分的事件，浪费在这个>问题上，因为如果处理不了这个问题，后边的功能和逻辑就无法实现。

在不断的搜集和阅览中，终于搜到了这样的一句话

// import Vue from 'vue'
//原因：vue3中没有全局的vue    "vue": "^3.2.33"
//解决方法：使用createApp
import {createApp} from 'vue';

查看自己项目下的package.json下vue的版本号为^3.2.33断定应该是vue3的版本，在项目下的node-modules目录下的vue文件的dist文件也没有找到vue.js的文件，因为实在找不到解决的方法，网上的残次不齐，也不知道说的是啥？机会是dist目录下的每一个js文件都尝试过，有的异常为

没有定义构造函数
没有定义function方法

直到我搜到这样的一句话，原来vue3中没有vue ，也就无法使用vue高级语法[也不知道说的对不对】

创建目录

webpack
- dist
- src
  - index.html
  - main.js
  - css
  - images
webpack.config.js
package.jsopn
node-modules
package-lock.json

使用 npm init -y 初始化得到package.json文件

下载webpack必须的框架包

npm i webpack webpack-cli webpack-dev-server -D

下载 vue-loader

npm i vue-loader -D

下载 html-webpack-plugin 在内存中会创建虚拟html样式文件

npm i html-webpack-plugin -D

配置 dev 在package.json文件中配置dev

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

创建index.html内容

<body>
	<div id="app">
		<p>{{msg}}</p>
	</div>
</body>

main.js文件配置

// import Vue from 'vue'
//原因：vue3中没有全局的vue    "vue": "^3.2.33"
//解决方法：使用createApp
import {createApp} from 'vue';
createApp({
    data() {
      return {
        msg: 'Hello Vue!'
      }
    }
  }).mount('#app')

####### 配置webpack.config.js文件
####### 配置

entry 要打包文件的入口
output 输出文件的相关配置
devServer 配置webpack-dev-server相关命令配置
module 指定解析各种文件loader模块
- {test:/.vue$/, use:“vue-loader”} 指定解析vue的loader
plugins 插件模块
- new webpack.HotModuleReplacementPlugin() 热启动[有三步，请观代码顺序]
- new HtmlWebpackPlugin({}) 在内存中生成html页面的插件
mode 必须指定环境模式[开发环境或者产品环境模式]
resolve 指定相关格式文件的解析的js文件


const path = require('path');
const webpack = require('webpack'); //启用热更新的第二步
// html自动在内存中生成html页面文件 的插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry:path.join(__dirname,'./src/main.js'), //入口文件 需要打包的文件
	output:{ //输出文件和相关配置
		filename:'bundle.js',
		path:path.join(__dirname,'./dist') //指定打包好的文件，输出到哪个目录上去
	},
	devServer:{ //这是配置web-server命令的第二种形式
		open:true, //自动打开浏览器
		port:300, //设置启动端口
		//contentBase:'src' ,//设置托管的根目录 好像没有这个
		hot:true //启用热启动 启动热更新第一步
	},
	module:{
		rules:[
			//{test:/\.less$/, use:['style-loader','css-loader','less-loader']}, //需要同时下载 less less-loader
			//{test:/\.css$/, use:['style-loader','css-loader']},
			//{test:/\.scss$/, use:['style-loader','css-loader','sass-loader']}, //处理sass sass-loader文件
			//url-loader默认采用ES6模块语法  html-loader使用commonJs  所以这里需要关闭es模块语法即可
			{test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?esModule=false&limit=10*1024&name=[hash:8]-[name].[ext]' ,type: 'javascript/auto'},
			//默认图片会被转为base64字符串 
			// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
			//{test:/\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'}, //处理字体文件的loader
			// { test: /\.js$/, use: 'babel-loader?rootMode=upward', exclude: /node_modules/} //exclude:/node-modules/ 剔除/node-modules/目录下的js文件    配置 Babel 来转换高级的ES语法
			{test:/\.vue$/, use:"vue-loader"}
	// 		{
	// 			test:/\.html$/,	
	// 			//处理html文件并负责引入，从而被url-loader进行处理
	// 			loader:'html-loader'
	// 		}
		]
		
	},
	plugins:[
		new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象 这是启动热更新的第三步
		// 1、template配置项在html文件使用file-loader时，其所指定的位置找不到，导致生成的html文件内容不是期望的内容。
		// 2、为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如 template: './index.html'，若没有为.html指定任何loader就使用ejs-loader
		new HtmlWebpackPlugin({ //城建一个在内存中生成的html页面的插件
			title:'rd平台',
			template:'./src/index.html', //指定模板页面 
			filename: 'index.html', // 输出文件【注意：这里的根路径是module.exports.output.path
			showErrors: true,
			//true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。
			inject: 'body',
			/*向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同
			1、true或者body：所有JavaScript资源插入到body元素的底部
			2、head: 所有JavaScript资源插入到head元素中
			3、false： 所有静态资源css和JavaScript都不会注入到模板文件中*/
			chunks: ["common",'index']
		})
	],
	// ''mode:'none',
	mode: 'development', //开发模式 
	resolve: {
	    alias: { // 修改 Vue 被导入时候的包的路径
	      "vue$": "vue/dist/vue.esm-bundler.js"
	    }
	}
}

测试 webpack 会在dist目录下创建bundle.js文件和index.html文件

开启 webpack-dev-server命令 npm run dev

在浏览器地址栏输入 http://loaclhost:300就能看到结果

原文链接：https://blog.csdn.net/qq_64353584/article/details/124308483