vue自动刷新实时更新，webpack-dev-server

我们之前使用 webpack -d --watch 来在开发环境下编译静态文件，但是这个功能，完全可以用 webpack-dev-server 来代替。

除此之外， webpack-dev-server 还有其他的功能，比如在本地上开启服务，打开浏览器等。

vue自动刷新实时更新。这节我们主要来简单体验一下 webpack-dev-server 的功能。

# 先全局安装
$ npm install -g webpack-dev-server
$ npm install --save-dev webpack-dev-server

 

然后运行命令：

$ webpack-dev-server

webpack快速入门？现在我们用浏览器打开 localhost:8080 也可以看到以前的效果。

服务器的根目录就是当前项目的打包目录

 

webpack import？默认是运行在 8080 端口，这个我们可以改。

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {entry: './src/app.js',...devServer: {port: 9000},...
};

 

web proxy server、我们还可以配置一运行 webpack-dev-server 的时候就自动打开浏览器。

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {entry: './src/app.js',...devServer: {port: 9000,open: true},...
};