webpack实现热更新

r囧r小猫 2022-10-11 14:00 291阅读 0赞

昨天看到公司有前端同事在研究`webpack`，今天有空正好找下资料也`look look`

我最早接触`webpack`是2019年6月-7月之间，当时对前端还是很模糊的，很多东西都是听过课程，但是由于没有实践经验，所以很多东西都没有深入研究。现在一看，果然啥也不会了……哭死

查询了资料，找到一个可行的，现在记录如下：

## 1.目录结构 ##

1.  在文件夹中创建3个文件夹，分别是：`src` `dist` `config`
2.  在`src`文件夹中创建一个`main.js`
3.  在`dist`文件夹中创建一个`index.html`
4.  在`config`文件夹中创建一个`webpack.dev.js`
5.  在根目录文件夹中，输入`npm init -y`,系统会生成一个`package.json`,并且有相关的一些配置内容
6.  使用命令行，输入`git init`，系统会生成一个`git`文件夹，该文件是隐藏不可见的

## 2.全局安装 `webpack` `webpack-cli` `webpack-dev-server` ##

npm install webpack webpack-cli webpack-dev-server -g

注意：

1.  `-g` 就是全局安装
2.  安装完一定要注意版本号，我在安装的时候就出现了各种报错问题，根本原因就是版本不兼容

## 3.查看`webpack`的版本——处理兼容问题 ##

webpack -v

输入`webpack -v`可以查看到`webpack` `webpack-cli` `webpack-dev-server`的版本号  
![在这里插入图片描述][20210701141807223.png]  
注意：`webpack-cli`需要使用`3.3.12`版本的，所以需要重新安装低版本的`webpack-cli`  
![在这里插入图片描述][20210701141718343.png]  
安装完成后，对应的`package.json`文件中也会有相应的改变：  
![在这里插入图片描述][20210701142121344.png]

## 4.配置`webpack.dev.js`文件 ##

配置`config`文件夹中的`webpack.dev.js`文件，定义入口文件为`main.js`，打包环境为开发环境`development`，出口文件为`dist`文件夹，如下示例：

const path = require("path"); //这里引入node的path模块
    module.exports = { 
        //入口文件可以有多个，多个的时候用数组的形式写
        entry: { 
            main: './src/main.js' //这里定义main.js为入口文件
        },
        //打包环境，开发/生产
        mode: 'development', //打包环境为：生产环境
        //出口，只能由一个
        output: { 
            filename: "[name]-bundle.js", //打包后的文件名称，[name]是根据打包的文件名自己生成的，后面的-bundle是写死的
            path: path.resolve(__dirname, "../dist"), //dist文件夹
            publicPath: "/" //公开路径 
        },
        //配置本地服务器
        devServer: { 
            contentBass: 'dist', //指定一个本地服务器路径，否则会默认为根目录
        }
    }

## 5.修改`package.json`文件 ##

"scripts": { 
          "test": "echo \"Error: no test specified\" && exit 1",
          "build": "webpack --mode production",
          "dev": "webpack --mode development"
      },

然后执行`npm run build`操作

此时并没有在`dist`文件夹中生成`main.js`文件，而且控制台报错如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
百度后发现解决方法如下：

webpack ./src/main.js -o ./dist

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
此时发现`dist`文件夹中出现了一个`main.js`文件，然后在`index.html`文件中引入`main.js`文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
在`index.html`文件中，右击选择`open with live server`即可打开此文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
此时，在`main.js`文件中添加内容，然后保存，发现打开的页面控制台中有打印相应的内容。

此时改变`src`中的`main.js`文件，还是需要执行一下`webpack ./src/main.js -o ./dist`这个命令才可以。感觉这样并不是完全的热更新。  
如果有大神知道问题出在哪里，可以告知我。谢谢。

[20210701141807223.png]: /images/20221005/80f8ab20797849cc8a21d5e7d0fc1761.png
[20210701141718343.png]: /images/20221005/17417549f6b44a07b8227fef22972c03.png
[20210701142121344.png]: /images/20221005/c5b85cada6994cc2bcd6980f2118fd99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/98c9334f9f684f95ab49f01af86e2cd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/8fc938272969403d82cb1b2c3c856541.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/73dacf2d157b490ab6e62012911a7647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221005/0b98cec0a7194f6d834a2b418c5f5e52.png