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 vue-loader@16.0.0-beta.4 -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: 出口文件目录,
filename: 出口文件名 },
module: {
rules: [ 各类loader配置项 ] },
plugins: [各类插件名], };

const path=require("path")
const { VueLoaderPlugin }=require("vue-loader")module.exports={entry:"./src/main.js",//入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk。output:{//出口文件，是模块构建的终点，包括输出文件与输出路径。path:path.join(__dirname,"dist"),//路径filename:"main.js"//文件名},plugins:[new VueLoaderPlugin()],module:{rules:[{test:/\.css$/,use:["style-loader","css-loader"]},{test:/\.vue$/,use:["vue-loader"]}]},mode:"development"//模式production
}

9:完成对于vue，css文件的相应处理，最后就可以编写对应的css，vue的内容

Css:
body{background-color: yellow;
}

Vue:
<template><div>{{ welcomeLanguage }}</div>
</template>
<script>import { setup } from 'vue'export default {name:"firstVueProJectInVue3",setup() {var welcomeLanguage="welcome to use Vue3 in Webpack"return { welcomeLanguage }},}
</script>

10:进行打包：
在package.json中修改

"build": "webpack build",
"serve": "webpack serve",
"watch": "webpack --watch"

运行npm run build后完成打包

11,运行查看：

报错：

错误1
Vue3如果报错：

因为：
解决办法一:
安装了eslint规范，ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误
解决办法:
vue3.0版本中setup相当于之前2.0版本中的beforeCreate和created，它是在组件初始化的时候执行的，甚至比created更早执行。值得我们注意的是，在vue3.0中要是想用setup里面的数据，必须要将此值return出来，返回来的值在模板中都是可以使用的。
假如没有return出来，而直接去使用的话浏览器会提示：
在package.json文件内加入如下代码：然后保存重启项目

解决办法二：
将set函数改为data：

data(){return{welcomeLanguage:"welcome to use Vue3 in Webpack using data"}},

错误二：
You may need an additional loader to handle the result of these loaders.

解决办法：
webpack无法打包.vue文件，安装相关的loader

cnpm i vue-loader vue-template-compiler -D
在配置文件中新增loader; { test: /.vue$/, use: ‘vue-loader’ },

2：插件推荐：

具有实时重载的功能
webpark-dev-server:

npm i html-webpack-plugin -D
配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 其它配置// 插件都放 plugins 中plugins: [new HtmlWebpackPlugin({// 选择模板 public/index.htmltemplate: './public/templates/index.html',// 打包后的名字filename: path.resolve(__dirname, './dist/templates/index.html'),// js文件插入 body里inject: 'body',}),]
}

运行npm run serve开始实时监听
退出：ctrl^v

报错：
错误一：
webpack(自动打包)页面报错Cannot GET /

在webpack.config.js文件中 module.exports 对象下 添加以下代码即可:
// 添加以下代码：
devServer: {static: {directory: path.join(__dirname, './'),watch: true}
}

Vue.config.js:
添加;
publicPath: "./",

错误二：
Failed to load resource: the server responded with a status of 404 (Not Found)：
加载资源失败:服务器响应404
解决办法：
说明你导入的js/css/文件路径没有正确

3：热更新：

原理：HMR是webpack-dev-server和HotModuleReplacementPlugin 共同的功劳。

1：安装Webpack-dev-server
npm i webpack-dev-server -D
提前安装html-webpack-plugin插件

成功标志：
开发者工作里面打印出**[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.**表示启动热更新服务器成功

2：BUG说明：
①在pageage.json里面output路径要保持默认或path: path.resolve(__dirname, ‘./dist’)，不然就会无法运行服务器热更新；
②webpack默认支持打包img的时候不要设置路径使用默认的，不然会出错；
③插件MiniCssExtractPlugin不能用于热更新需要style-loader

webpack.config.js
// scripts里面加入下面的第二行“start”这个 "scripts": { "start": "webpack serve" },
// 配置 webpack-dev-server的选项
devServer: {
//配置一：
//·host: '127.0.0.1', // 配置启动ip地址
//·port: 5002, // 配置端口
//·open: false// 配置是否自动打开浏览器static: {// 该配置 可以设置如果项目中找不到的资源， 可以在当前目录下的文件夹另外加载directory: path.join(__dirname, './/热更新/父组件.js'),// 实现监听watch: true,},hot: true,//开启热更新//可以更改服务器打开的文件（需要是上面提到插件打开的路径）
}

实时打包到文件：
// scripts里面加入下面的第二行“watch”这个

"scripts": {
"watch": "webpack --watch"
},

3.起别名使用：

import '@/css/loser.css'
const path = require('path')
module.exports = {// 之前的配置resolve: {// 路径别名alias: {'@': path.resolve('./src'),'@co':path.resolve(__dirname,'src/components')},// 引入文件时省略后缀extensions: ['.js', '.ts', '.less', '.vue'],},
}

报错：
错误一：
Node—modules报错：

解决办法：
删除项目中node_modules文件夹，
执行 npm cache clean --force 命令清除掉cache缓存，
npm install 重新安装依赖后，
npm run serve运行项目

错误二：

解决办法：
该配置项在webpack5.x中被删除
解决方法：将配置项升级到最新版optimization.moduleIds: ‘named’ （在webpack5.x中可以将optimization.moduleIds和optimization.chunkIds从webpack配置中移除，直接使用默认值会更合适，因为它们会在production模式下支持长效缓存且可以在development模式下进行调试）
备注：
webpack5.x废弃的配置项及对应最新的版本

optimization.hashedModuleIds: true → optimization.moduleIds:
‘deterministic’
optimization.namedChunks: true → optimization.chunkIds: ‘named’
optimization.namedModules: true → optimization.moduleIds: ‘named’
NamedModulesPlugin → optimization.moduleIds: ‘named’
NamedChunksPlugin → optimization.chunkIds: ‘named’
HashedModuleIdsPlugin → optimization.moduleIds: ‘deterministic’
optimization.noEmitOnErrors: false → optimization.emitOnErrors: true
optimization.occurrenceOrder: true → optimization: { chunkIds:
‘total-size’, moduleIds: ‘size’ }
optimization.splitChunks.cacheGroups.vendors →
optimization.splitChunks.cacheGroups.defaultVendors
Compilation.entries → Compilation.entryDependencies
serve → serve 已被移除，推荐使用 DevServer
Rule.query (从 v3 开始被移除) → Rule.options/UseEntry.options

错误三：
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

解决方法：
Hot应该放在devServer里面。

4：热更新原理：

1、开启本地服务
1:通过webpack创建了一个compiler实例，然后通过创建自定义server实例，开启了一个本地服务。
2:自定义Server 不仅是创建了一个http服务，它还基于http服务创建了一个websocket服务，同时监听浏览器的接入，当浏览器成功接入时向它发送hash值，从而实现服务端和浏览器间的双向通信。
2、监听编译完成
当代码改变时，浏览器也可以接到这样的通知。在开启服务前，还需要对编译完成事件进行监听
监听编译完成，当编译完成后通过websocket向浏览器发送广播
3、监听文件修改
对代码的变动进行监听,webpackDevMiddleware库实现,使用了compiler.watch对文件的修改进行了监听，并且通过memory-fs实现了将编译的产物存放到内存中
4、向浏览器中插入客户端代码
浏览器接入到本地开启的websocket服务,自己提供这样的客户端代码将它运行在浏览器。因此自定Server在开启http服务之前，就调用了updateCompiler()方法，它修改了webpack配置中的entry，使得插入的两个文件的代码可以一同被打包到 main.js 中，运行在浏览器。

HotModuleReplacementPlugin
1、为模块添加hot属性
当代码发生改动时，服务端会向浏览器发送ok消息，浏览器会执行module.hot.check进行模块热检查。
2、请求补丁文件
浏览器会向服务端获取两个补丁文件。
3、模块内容替换
当hot-update.js文件加载好后，就会执行window.webpackHotUpdate，进而调用了hotApply。hotApply根据模块ID找到旧模块然后将它删除，然后执行父模块中注册的accept回调，从而实现模块内容的局部更新。

原理：
在执行npm run dev 后，首先会通过updateCompiler方法去修改compiler的entry，将两个文件的代码一起打包到main.js，这两个文件一个是用来与服务端进行通信的，一个是用来调用module.hot.check的。接着通过compiler.hooks.done.tap来监听编译完成，通过compiler.watch 监听代码的改动，通过createSocketServer()开启http服务和websocekt服务。
当用户访问http://localhost:8080时，浏览器会与服务端建立websocket连接。随后服务端向浏览器发送hash 和 ok ,用来通知浏览器当前最新编译版本的hash值和告诉浏览器拉取代码。同时服务端，会根据路由，将内存中的文件返回，此时浏览器保存hash,页面内容出现。
当修改本地代码时，会触发重新编译，此时webpackDevMiddleWare会将编译的产物保存到内存中，这得益于内置模块memory-fs的功劳。同时HotModuleReplacementPlugin 会生成两个补丁包，这两个补丁包一个是用来告诉浏览器哪个chunk变更了，一个是用来告诉浏览器变更模块及内容。当重新编译完成，浏览器会保存当前hash,然后通上一次的hash 值拼接出要请求的描述文件路径，再根据描述文件返回的内容，拼接出要另一个要请求的补丁包文件。请求成功就开始执行webpckHotUdate了，会继续调用 hotApply,实质就是执行了我们当初在配置模块热更新第二步中的回调事件，从而实现了页面内容的局部刷新。

webpack配置及热更新原理相关推荐

webpack 热更新原理解析
一.什么是 HMR HMR 全称 Hot Module Replacement,中文语境通常翻译为模块热更新,它能够在保持页面状态的情况下动态替换资源模块,提供丝滑顺畅的 Web 页面开发体验. 1. ...
webpack热更新原理-连阿珍都看懂了
前言在旧开发的时代,前端项目在开发的过程中修改代码,很有可能是手动切到浏览器刷新页面来看到改动效果.操作不方便且页面之前的编辑记录也都丢失,体验可以说为0.想象一下一个表达你努力填满了所有输入项,结 ...
webpack中的HMR(热更新)原理剖析
简介 Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模 ...
【Webpack】1047- 轻松理解webpack热更新原理
一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...
webpack热更新原理
webpack热更新原理文章目录 webpack热更新原理一.什么是热更新? 二.webpack热更新基本原理 1.修改webpack.config.js的entry配置 2.启动本地服务 3.监 ...
webpack和vue热更新
目录 webpack一些概念介绍 webpack热更新流程 1. 启动阶段 ①->②->A->B 2. 更新阶段 ①->②->③->④ vue的组件热更新模块总结 ...
linux进程热更新 go,Golang热更新原理
Linux进程间通信方式首先,进程之间为什么要进行通信呢?主要有以下应用场景: 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几兆字节之间. 共享数据:多个进程想要操作共 ...
菜鸟入门【ASP.NET Core】6：配置的热更新、配置的框架设计
配置的热更新什么是热更新:这个词听着有点熟悉,但到底是什么呢? 一般来说:创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的我们只需要吧项目中用到的IOpti ...
热更新原理及实践注意
首先要说明几个概念,不要混用,热部署,热加载: 热部署:就是已经运行了项目,更改之后,不需要重新tomcat,但是会清空内存,重新打包,重新解压war包运行,可能好处是一个tomcat多个项目,不必因 ...

webpack配置及热更新原理

1：配置webpack

2：插件推荐：

3：热更新：

4：热更新原理：

webpack配置及热更新原理相关推荐

最新文章

热门文章