webpack-dev-server实现项目热部署

￡神魔★判官ぃ 2022-04-17 00:22 260阅读 0赞

### 文章目录 ###

*  webpack-dev-server
 *   *  webpack-dev-server作用
     *  添加webpack-dev-server
 *  修改源码
 *  运行结果

# webpack-dev-server #

## webpack-dev-server作用 ##

我们在修改了项目代码以后需要不断的重新执行`webpack`命令，重新打包然后回到浏览器去刷新页面，这种开发效率很低下，所以说为了省去这部分没必要的操作，因而我们在这里要使用`webpack-dev-server`来实现当代码更新时项目的自动打包发布，刷新浏览器页面的操作。

这一篇文章是在上一篇文章源码的基础上写出来的，所以说在源码部分可以参考上一篇文章。

*  [利用webpack打包其它资源文件][webpack]

## 添加webpack-dev-server ##

`webpack-dev-server`需要的依赖为`webpack-dev-server`和`html-webpack-plugin`，其中`webpack-dev-server`又依赖于`webpack`，因而我们要在`package.json`中添加这三个依赖项。

# 修改源码 #

`site.css`源码：

在`site.css`中添加如下代码，该代码的意识是添加背景图片，而该图片的大小大于20KB。这样图片就不会以`base64`位的形式加载到`build.js`中，而会以图片路径的形式进行加载

#bg1{
        width:450px;
        height:675px;
        background-image: url("../imgs/jpg/girl.jpg");
    }

`index.html`源码：

在其中添加如下代码用来展示图片：

同时删除如下代码，因为此时项目的页面资源路径将会以热加载的形式加载资源链接。

`package.json`源码：

这里需要在文件的`scripts`关键字下添加如下指令，用于启动`webpack-dev-server`服务器。

"dev": "webpack-dev-server --inline --hot --open --port 4009"

参数说明：

--inline:自动刷新
    --hot:热加载
    --port:指定端口号为5200
    --open:自动在默认浏览器中打开
    --host:可以指定服务器的ip,不指定默认为127.0.0.1(localhost)

同时在控制台中，将光标定位于项目根目录中，执行下述指令将`webpack`、`webpack-dev-server`、`html-webpack-plugin`打包到`package.json`文件中。

cnpm i webpack webpack-dev-server html-webpack-plugin --save-dev

现在由于这里变动不少，而且一直没有上一个完整的源码，所以说现在上的完整源码如下：

{
      "name": "csspackage",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "dev": "webpack-dev-server --inline --hot --open --port 4009"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^1.0.1",
        "file-loader": "^0.11.1",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.8.1",
        "less-loader": "^4.1.0",
        "node-sass": "^4.10.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "url-loader": "^0.5.8",
        "webpack": "^1.14.0",
        "webpack-dev-server": "^1.16.0"
      }
    }

`webpack.config.js`源码：

在源码中添加`html-webpack-plugin`依赖的引用，如下：

var htmlwp = require('html-webpack-plugin');

同时添加如下代码：

,plugins:[
       new htmlwp({
            title:'首页'   //生成的页面标题
            ,filename:'index.html'  //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，
            ,template:'index.html'  //根据index.html这个模版来生成（这个文件请程序员自己生成）
        })
    ]

为了方便起见，完整源码为：

var htmlwp = require('html-webpack-plugin');
    module.exports = {
        entry:'./src/main'   //指定打包的入口文件
        ,output:{
            path:__dirname +  '/dist'
            ,filename:'build.js'
        }
        ,module:{
            loaders:[
                {
                    test:/\.css$/
                    ,loader:'style-loader!css-loader'
                }
                ,{
                    test:/\.scss$/
                    ,loader:'style-loader!css-loader!sass-loader'
                }
                ,{
                    test:/\.less/                    //打包.less文件
                    ,loader:'style-loader!css-loader!sass-loader!less-loader'
                }
                ,{
                    test:/\.(png|jpg|gif|ttf)$/           //打包url请求的资源文件
                    ,loader:'url-loader?limit=20000'     //limit表示图片的大小为40k是临界值，小于20k的图片均被
                    // 打包到build.js中去，此时图片的显示就会很快，这是一个优化操作。
                }
            ]
        }
        ,plugins:[
            new htmlwp({
                title:'首页'   //生成的页面标题
                ,filename:'index.html'  //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，
                ,template:'index.html'  //根据index.html这个模版来生成（这个文件请程序员自己生成）
            })
        ]
    };

# 运行结果 #

在控制台中执行下述指令

cnpm i
    webpack
    npm run dev

然后再浏览器中访问`dist/index.html`，其访问结果如下：

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

在上面，我们明显可以看到，我们所加载的图片已经展示出来了，当然在这里，其实我们只需要下面这个指令就行了：

npm run dev

此时在控制台中就会显示出来我们的网页访问路径：

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

通过访问上图路径，我们可以看到和之前一样的界面展示效果。

与之前不同之处在于，前面的页面展示其实是因为`webpack`指令将页面打入了`dist/index.html`中，此处的页面在修改代码后要想实现刷新，得重新执行一次`webpack`指令。

而图示中的`http://localhost:4009/`路径则是属于热加载的网页路径，此处的路径在修改代码时页面可以实现热加载效果。

[webpack]: https://blog.csdn.net/ZZY1078689276/article/details/83900909
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70]: /images/20220417/52469d9e137645e2a30f402cc882a565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1paWTEwNzg2ODkyNzY_size_16_color_FFFFFF_t_70 1]: /images/20220417/68205ff1e6cd44c3ad35937195228db5.png