五：webpack-dev-server 搭建本地服务以及浏览器实时刷新

一、概述

开发项目中为了保证上线，开发项目是都需要使用localhost进行开发，以前的做法就是本地搭建Apache或者Tomcat服务器。有的前端开发人员 对服务器的搭建和配置并不熟悉，这个时候需要后台开发人员进行帮忙，有的时候后台开发人员还爱答不理的。为了解决这个爱答不理的问题，webpack-dev-server出现了，它的出现告诉后台开发人员，不用你们了。

webpack-dev-server的作用不只是搭建本地服务器，大家知道使用webpack可以 进行监听和打包文件，但是如果文件比较多，webpack执行会非常的慢，webpack-dev-server就可以解决 慢的问题。另一方面，webpack-dev-server可以进行浏览器的实时刷新， 避免了修改代码手动执行刷新功能。

webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译。

注意：启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件。


二、webpack-dev-server 安装

由于webpack-dev-server和webpack不是一个资源包，所以，需要单独安装webpack-dev-server资源包：

全局安装

npm install webpack-dev-server －g

项目安装

npm install webpack-dev-server --save-dev

这里建议进行项目安装，这样别人开发的时候只需要执行npm install 命令就能安装了，没有必须单独进行 全局安装了。

三、webpack-dev-server 服务器

首先我们看一下 都有哪些参数可选项：

--content-base //设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。
--quiet: //控制台中不输出打包的信息，开发中一般设置为false，进行 打印，这样查看错误比较方面
--no-info: // 不显示任何信息
--colors: //对信息进行颜色输出
--no-colors: //对信息不进行颜色输出
--compress:  //开启gzip压缩
--host <hostname/ip>: //设置ip
--port <number>: //设置端口号，默认是:8080
--inline: //webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
--hot: //开发热替换
--open: //启动命令，自动打开浏览器
--history-api-fallback: //查看历史url

这里只是列举一下常用了的，相关的参数可以查看：http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

1、content-base

设定webpack-dev-server的根目录。如果不进行设定的话，默认是在当前目录下。

webpack-dev-server --content-base ./assets

这个时候还要注意的一点就是在webpack.config.js文件里面，如果配置了output的publicPath这个字段的值的话，在index.html文件里面也应该做出调整。因为webpack-dev-server的根目录是相对publicPath这个路径的。因此，如果你的webpack.config.js配置成这样的：

 module.exports = {
        entry: ‘./src/js/index.js‘,
        output: {
            path: ‘./dist/js‘,
            filename: ‘bundle.js‘，
            publicPath: ‘/assets/‘
        }
    }

那么，在index.html文件当中引入的路径也发生相应的变化:

   
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <script src="assets/bundle.js"></script>
    </body>
    </html>

如果在webpack.config.js里面没有配置output的publicPath的话，那么index.html最后引入的文件js文件路径应该是下面这样的。

    
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
    </html>

直接在命令行执行一下命令，就可以启动服务器：

webpack-dev-server --content-base ./assets

四、webpack-dev-server 的热替换

webpack-dev-server支持2种自动刷新的方式：

  • Iframe mode， webpack-dev-server默认的刷新模式
  • inline mode

1、Iframe mode

Iframe mode刷新模式是在网页中嵌入了一个iframe，将我们自己的应用注入到这个iframe当中去，因此每次你修改的文件后，都是这个iframe进行了reload。

启动Iframe mode刷新模式直接使用命令就可以启动了：

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

浏览器访问的路径是:

localhost:8080/webpack-dev-server/index.html。

2、Inline-mode

Inline-mode刷新模式是直接刷新页面，不会在页面增减任何的元素或者js插件，它是直接放在内存中，这种方式也是官方推荐的，并且速度相对来说比较快。实现Inline-mode刷新模式 有很多的方法，下面我们来列举一下：

方法一：将代码内联到入口配置文件webpakc.config.js文件entry属性里面，并且添加new webpack.HotModuleReplacementPlugin()热点插件

var webpack = require(‘webpack‘);
var WebpackDevServer = require("webpack-dev-server");

module.exports = {

    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
    entry: [
        ‘webpack-dev-server/client?http://localhost:8080/‘,
        ‘./src/index.js‘
    ],

    //输出的文件名,合并以后的js会命名为bundle.js
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle.js"
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

这种方式比较容易，但是不够灵活，需要添加相关的热点插件。

方法二、直接在你index.html引入这部分代码:

<script src="http://localhost:8080/webpack-dev-server.js"></script>

这种方法更不好，项目上线还需要手动删除，坚决杜绝这些方法。

方法三、直接实现一个server.js，启动服务器(需要启动热替换plugin)

var webpack = require(‘webpack‘);　　
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require(‘webpack-dev-server‘);
var config = require("./webpack.config.js");

config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000"); // 将执替换js内联进去
config.entry.index.unshift("webpack/hot/only-dev-server");

var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
    hot: true,
    historyApiFallback: false,
    // noInfo: true,
    stats: {　　
        colors: true // 用颜色标识
            　　
    },
    　　proxy: {　　　　
        "*": "http://localhost:9000" // 用于转发api数据，但webpack自己提供的并不太好用
    },
});
server.listen(9000);

方法四、直接在webpack.config.js上配置。这个办法最简单，当然灵活性没有自己实现一个服务器好。

 

var webpack = require(‘webpack‘);
var WebpackDevServer = require("webpack-dev-server");
var path = require(‘path‘);
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, ‘../‘); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, ‘./node_modules‘); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, ‘./dist‘); // 最后输出放置公共资源的目录

//用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘);

module.exports = {

    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
    entry: [
        ‘./src/index.js‘
    ],

    //输出的文件名,合并以后的js会命名为bundle.js
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle.js"
    },
    devServer: {
        historyApiFallback: true,
        contentBase: "./",
        quiet: false, //控制台中不输出打包的信息
        noInfo: false,
        hot: true,
        inline: true,
        lazy: false,
        progress: true, //显示打包的进度
        watchOptions: {
            aggregateTimeout: 300
        },
        port: ‘8088‘
    }
};

五、配置webpackDemo项目本地 服务器

上面我们讲解了webpack-dev-server 搭建本地服务以及浏览器实时刷新的相关方法和配置，我们选择方法四 直接在webpack.config.js使用devServer配置服务器以及热点替换。内容如下：

var webpack = require(‘webpack‘);
var WebpackDevServer = require("webpack-dev-server");
var path = require(‘path‘);
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, ‘../‘); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, ‘./node_modules‘); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, ‘./dist‘); // 最后输出放置公共资源的目录

//用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘);

module.exports = {

    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
    entry: [
        ‘./src/index.js‘
    ],

    //输出的文件名,合并以后的js会命名为bundle.js
    output: {
        path: path.join(__dirname, "dist/"),
        publicPath: "http://localhost:8088/dist/",
        filename: "bundle.js"
    },
    devServer: {
        historyApiFallback: true,
        contentBase: "./",
        quiet: false, //控制台中不输出打包的信息
        noInfo: false,
        hot: true,
        inline: true,
        lazy: false,
        progress: true, //显示打包的进度
        watchOptions: {
            aggregateTimeout: 300
        },
        port: ‘8088‘
    }
};

这个时候index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
<h1>welcome to 68kejian.com</h1>
</body>
</html>

然后在命令行执行一下操作启动 服务：

webpack-dev-server --hot --inline

在浏览器输入:localhost:8088, 这里我们设置的端口号是:8088

这个时候随意修改login.js的userName的值，看看页面是不是刷新了。

时间： 2024-12-16 13:35:39

五：webpack-dev-server 搭建本地服务以及浏览器实时刷新的相关文章

Ubuntu Server搭建svn服务以及迁移方法【转】

转自:http://www.linuxidc.com/Linux/2013-05/84693.htm Ubuntu Server搭建svn服务以及迁移方法 采用apache+svn,http访问方式. 先确定安装了apache,没有安装则用以下命令: sudo apt-get install apache2 然后安装subversion及svn-apache连接库: sudo apt-get install subversion sudo apt-get install libapache2-s

[Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the host option. This lesson walks you through accessing webpack dev server using an iPhon Ch

笔记：配置 webpack dev server

笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 启动 webpack-dev-server 原文地址:https://www.cnblogs.com/F4NNIU/p/webpack-dev-server.html

Webpack Dev Server + React Hot Loader

1.安装 npm install webpack-dev-server react-hot-loader --save-dev 2.配置server.js var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); new WebpackDevServer(webpack(config), { pu

用nodejs http-server搭建本地服务环境

一.本地环境,不包括域名的方法: https://www.npmjs.com/package/http-server(参考手册) 正确使用方法: 二.带域名的配置方法: https://cnodejs.org/topic/50d41da5637ffa4155f63179和http://blog.csdn.net/yuan882696yan/article/details/25052469(参考方法) nodejs通过代理(proxy)发送http请求(request): 方法一: request

svn搭建本地服务端

使用VisualSVN Server来完成,下载地址:https://www.visualsvn.com/server/download/ 我安装的版本是3.3.1,安装的时候选择了标准版本,另外一个版本需要付费(日志跟踪.VDFS等功能)更多可以参考 https://www.visualsvn.com/server/licensing/ 安装完成之后,界面是这样的 这样就创建了一个svn代码库了. VDFS是需要付费才支持的 创建后的SVN地址默认是使用机器名的, 可以在首页的Configur

利用gulp搭建本地服务器，并能模拟ajax

工作中可能会用到的小工具,在此记录一下.可以实现的功能有: 本地http服务器 页面实时刷新 可以模拟ajax请求 第一步,新建package.json文件.用到了gulp.gulp-webserver.gulp-livereload package.json的内容如下: { "name": "localserver", "version": "1.0.0", "description": "&q

【阿里云】在 Windows Server 2016 下使用 FileZilla Server 安装搭建 FTP 服务

 Windows Server 2016 下使用 FileZilla Server 安装搭建 FTP 服务 一.安装 Filezilla Server 下载最新版本的 Filezilla Server: https://filezilla-project.org/download.php?type=server . 在本地也需要安装 FileZilla Client :https://filezilla-project.org/download.php?type=client 二.配置FTP端口

vue2.0配置webpack.dev.conf.js加载本地json数据

打开webpack.dev.conf.js 在const portfinder = require('portfinder')后加入以下配置 1 const express = require('express') 2 const app = express() // 请求server 3 var appData = require('../data.json') //加载本地数据 4 var seller = appData.seller //获取对应的数据 5 var goods = app