webpack-dev-server模块

前言

webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。它在服务器端使用webpack-dev-middleware进行webpack构建打包；并在客户端注入一份runtime，用于接受服务器端的构建打包后信息。只需要提供一份简单的webpack配置文件，在命令行中运行wbepack-dev-server即可运行起来。

安装

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

什么是 webpack-dev-server

webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。它在服务器端使用webpack-dev-middleware进行webpack构建打包；并在客户端注入一份runtime，用于接受服务器端的构建打包后信息。只需要提供一份简单的webpack配置文件，在命令行中运行wbepack-dev-server即可运行起来。

var path = require("path");

module.exports = {
    entry: {
        // 以./app/main.js作为入口文件，构建输出app.js
        app: ["./app/main.js"]
    },
    output: {
        // 将构建打包输出的app.js放到build目录下
        path: path.resolve(__dirname, "build"),
        // webpack构建输出的临时文件存放到内存中，而且是以publicPath作为相对路径。
        // publicPath并不会影响输出目录
        // 此外，如果指定路径下已经存在了相同文件，webpack会优先使用内存的临时文件
        publicPath: "/assets/",
        // 可以对构建输出的app.js进行二次定制化命名，比如加时间戳等
        filename: "[name].js"
    }
};

上面这份配置告诉webpack如何进行模块化管理，如何打包输出，我们就可以通过localhost:[port]/assets/bundle.js访问到构建后的打包文件。也就是说，webpack-dev-server底层一方面使用webpack在服务器端进行构建打包，一方面在客户端注入runtime以便和服务器端建立联系。显然，我们提供的webpack.config.js文件是提供给webpack的，也就是说想要做更多的构建任务，对webpack配置文件进行修改即可。

webpack-dev-server支持两种模式的自动刷新。

1.iframe模式

使用iframe模式并不需要多余的配置，直接访问http://[host]:[port]/webpack-dev-server/[path]即可，iframe模式的特征如下：
✦ 无需额外的配置
✦ 顶部条可以显示编译信息
✦ 浏览器的地址不会跟着页面URL变动

2.inline模式

简单配置可以开启，然后直接访问http://[host]:[port]/[path]即可，inline模式的特征如下：
✦ 需要额外的配置
✦ 编译信息只能在命令行和浏览器console中查看
✦ 浏览器的地址和页面URL同步

实际操作

1. 新建项目,在项目中，
2. 安装 webpack
3. 在项目中添加webpack.config.js配置文件，app文件夹，app文件夹下建一个index.js 和 sub.js
4. 执行 npm init 初始化项目
5. 安装 html-webpack-plugin、webpack-dev-server 插件

以下是文件的内容：

index.js

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World h1</h1>';
app.appendChild(sub());
document.body.appendChild(app);

sub.js

function generateText() {
　　var element = document.createElement('h2');
　　element.innerHTML = "Hello h2 world h2";
　　return element;
}
module.exports = generateText;

webpack.config.js

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');


//定义了一些文件夹的路径
const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'app');
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry: APP_PATH,
    //输出的文件名 合并以后的js会命名为bundle.js
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件
    },
    //添加我们的插件 会自动生成一个html文件
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello World app'
        }),//在build目录下自动生成index.html，指定其title
        new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
      historyApiFallback: true,
      inline: true, //注意：不要写colors:true，progress:true等，webpack2.x已不支持这些
    },

};

我们可以在 package.json 文件中自定义命令

"scripts": {
  "start": "webpack-dev-server --inline"
},

我们文件写好后，我们直接执行 npm run start,成功之后我们就可以访问我们的8080端口了。另外，我们还可以用一些其他插件或loader来处理一下我们的文件。

结束

• webpack-dev-server是一个模块化开发的解决方案，他封装了webpack，并作为一个简易的Node.js服务器供静态开发使用。虽然起步稍微复杂一些，但是环境搭好之后，无论对于新手还是老手，开发体验提升很大，对于工程化开发有很大的帮助。
• webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器，它在服务器端进行构建打包。
• webpack-dev-server代码中注入了一份runtime，来建立webpack-dev-server和客户端的联系。
• webpack-dev-server和客户端建立联系之后，可以做很多厉害的事情，比如自动刷新、热替换等。
• webpack-dev-server还提供了代理功能，代理有很多应用场景，举几个简单的例子：本地数据接口模拟、远端接口调试、分拆接口到不同的远端服务器等。
• 实际项目中，我们可以使用代理来整合前端项目和后台项目，也可以使用两个项目并行的方式来整合，也就是直接建立前端项目和后段项目的联系。这个方案对于多页应用更具有通用性。
• webpack-dev-server还有一些自己的配置项。

参考文章：

http://blog.csdn.net/sinat_17775997/article/details/54374878

http://www.cnblogs.com/xuehaoyue/p/6410095.html