前端实践项目(三)webpack-dev-server的使用

目录

  该系列的总目录, https://www.cnblogs.com/shadoll/p/14637373.html

一.说明

  接上一篇 前端实践项目(二)webpack生成html和外部引用 ,已经初步搭建了一个小demo。

  本文会使用webpack-dev-server来创建一个前端服务,并用上它的热加载功能。

二.安装和配置

  执行命令,安装插件。webpack搭建开发环境服务的插件。

cnpm install webpack-dev-server@2.11.3 --save-dev

   修改webpack.config.js配置。contentBase为该服务的根目录。port为服务端口。proxy为反向代理设置。

// 开发服务器,实时重新加载
devServer: {
    contentBase: ./dist,
    port: 8222,
    proxy: {
        "/api": {
            target: http://localhost:8005,
            changeOrigin: true
        }
    }
}

三.运行服务

  使用的命令是webpack-dev-server,它的尾缀是相关配置。

  --hot是热刷新,--inline是刷新模式。这两个加起来就是实现当你编译代码后,webpack会自动编译并且刷新网页。inline模式是在html嵌套一个js代码来监听是否刷新当前页面。

<script src="/webpack-dev-server.js"></script>

  --content-base是设置伺服的文件夹,一般将其设置为编译出包的文件夹就好,不设置则默认为根目录下。

  注意:

  如果在webpack.config.js配置了output的publicPath,那在html引用的js路径就需要调整,因为webpack-dev-server伺服的文件是相对publicPath这个路径的。我这里的配置是如下,实际编译在html的js引用路径也是“/”前缀,引用没有问题。

//入口文件输出配置
output: {
    path: __dirname + /dist,
    filename: js/[name].js,
    publicPath: /
},

  同时,使用webpack-dev-server后,在目标文件夹中是看不到编译后的文件的,因为它是将实时编译的文件存放在内存中。

  执行命令,在浏览器打开localhost:8222,便可以看到编译后的项目了。

webpack-dev-server --hot --inline --content-base ./dist

 

 

 

 

 

 

  

前端实践项目(三)webpack-dev-server的使用

上一篇:nginx使用ssl模块配置HTTPS支持


下一篇:记录一次 Newtonsoft.Json 与 System.Text.Json的小差异