目录
该系列的总目录, 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