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"
}
}
}
