关于配置webpack-dev-server(热更新)

深碍√TFBOYSˉ_ 2021-07-24 16:15 503阅读 0赞

### 大纲 ###

*  过程
 *   *  1.先编写devServer配置
     *  2.然后安装如下包
     *  3.运行npx webpack-dev-server 就出现了地址端口 ，或者配置如下json文件
     *  4.这时去访问游览器还会报错这时需要安装 HTML支持文件的包
     *  5.然后修改package.json配置文件
     *  6.然后在游览器继续访问，项目成功跑起
 *  汇总
 *   *  总共需要安装的包
     *  总的配置文件

# 过程 #

## 1.先编写devServer配置 ##

// webpack.config
    
    const path = require('path');
    module.exports = { 
        entry: './src/index.js',
        output: {  
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist')
        },
        devServer:{   // 开发服务配置
            port:3000,
            progress:true,  // 是否显示加载进度条
            contentBase:'./dist'
        }
    };

## 2.然后安装如下包 ##

npm install --save-dev webpack

## 3.运行npx webpack-dev-server 就出现了地址端口 ，或者配置如下json文件 ##

注：devvv的那条命令

// package.json
    
    "scripts": {     // 自己配置脚本shell命令
        "test001":"webpack --config webpack.config.js",    // 相当于在cmd下执行 npx webpack
        "devvv":"webpack-dev-server"   // 设置完后只要不修改配置文件，都是热更新的
    },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]

## 4.这时去访问游览器还会报错这时需要安装 HTML支持文件的包 ##

npm i html-webpack-plugin

## 5.然后修改package.json配置文件 ##

添加如下部分，代码都有注释

const HTMLPlugin = require('html-webpack-plugin');
    
    plugins: [ // 附加插件
        new HTMLPlugin({ 
            template:'./src/index.html', // 模板文件
            filename:'index.html'  // 打包出来的文件名
        })
    ]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]

## 6.然后在游览器继续访问，项目成功跑起 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]

# 汇总 #

## 总共需要安装的包 ##

npm install --save-dev webpack
    npm i html-webpack-plugin
    npm i html-webpack-plugin

## 总的配置文件 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/92b8052e7d174c6f8121393e24183ca3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: /images/20210724/96bac4a7928d443eb182c743d4d4fda0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]: /images/20210724/5d047f053c454af59c86308bd754fba7.png