前端实践项目（三）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