webpack配置及热更新原理

1：配置webpack

1：新建一个vue项目：
进入目录，在终端创建：
vue create 项目名；

2：创建新文件
对应的文件目录src下新建存放css文件index.css，项目的入口文件main.js以及vue模板app.vue

3：安装项目基本依赖：
npm i webpack webpack-cli -D

查看webpack版本：npm webpack -v
4：进行项目搭建，
在项目总目录下创建index.html
./dist/main.js是打包后的目标文件

5:配置打包环境
webpack.config.js中首要的就是配置入口文件，将src下的main.js作为打包的入口文件，而打包后的结果存放就放在index.js中所引用到的dist中
webpack基础配置

const path=require("path")
module.exports={
   
	//入口文件
    entry:"./src/main.js",
    //出口文件
    output:{
   
        path:path.join(__dirname,"dist"),
        filename:"main.js"
    },
    //模式
    mode:"development"
    plugin:[],
    module:{
   
        rules:[]
    }
}

6:loader

webpack本身是没有处理vue文件的能力，所以在webpack.config.js中配置对应的loader，

解析vue文件:
vue3的项目，对应的vue-loader版本是16.0.0-beta.4
npm i [email protected] -D

@vue/compiler-sfc:
npm i @vue/compiler-sfc -D

解析css文件：
下载css-loader，style-loader
npm i style-loader css-loader -D

解析less文件
less-loader：用于加载.less文件，将less转化为css
npm i less-loader -D

其他：

loader和webpack配置
webpack 打包
webpack-cli webpack命令行接口
vue-loader 把vue文件后缀编译
vue-template-compiler vue模板的编译
sass-loader 将sass文件转成css代码
css-loader 将css文件编译
style-loader 将模板中的style标签下的css进行编译
babel-loader 高级语法的兼容性问题
@babel/core babel的核心库
@babel/preset-env 兼容最新语法

安装：

npm i -D webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env

7：plugin
plugin 插件功能是 webpack 的支柱功能，主要是为了解决 loader 无法实现的其他情况，例如 HtmlWebpackPlugin 插件会在打包完成后自动生成一个 html 文件并且引入对应的 bundle 。
npm install --save-dev html-webpack-plugin

8:在webpack的module中做相应的配置

// 用于激活webpack的加载项和插件
const path = require('path'); 
module.exports = {
    
entry: 入口文件, 
output: {
    
path