Webpack-dev-server 使用示例

写在开始

前面，我们学习了 webpack 的基础使用，使用命令生成打包后的文件。
但是，每次修改代码，都要重新运行命令...生成文件...刷新页面，反复操作。

其实，可以使用 webpack-dev-server 可以很方便的做成服务端，可以完成自动刷新、热替换等功能。

示例1：命令行

1、安装

mkdir /你的工作目录/app-demo
cd /你的工作目录/app-demo
npm init
npm install webpack webpack-dev-server -g
npm install webpack css-loader style-loader --save-dev

2、创建测试文件

新建 app-demo/entry.js 文件：

require("./styles.css");
document.write('
Hello ，Webpack Dev Server !!!
');

新建 app-demo/styles.css 文件：

body {
    background: red;
}

3、运行

webpack-dev-server ./entry --hot --inline --module-bind "css=style\!css"

4、访问 http://localhost:8080/bundle

此时，我们会看到页面背景为红色，可以修改为其他颜色，不用手动刷新可以自动热更新。

示例2：配置文件

1、安装

mkdir /你的工作目录/app-demo-hmr
cd /你的工作目录/app-demo-hmr
npm init
npm install webpack webpack-dev-server -g
npm install webpack css-loader style-loader --save-dev

2、创建测试文件

新建 app-demo-hmr/src/main.js 入口文件：

require("./styles.css");
document.write('
Hello ，Webpack HMR !!!
');

新建 app-demo-hmr/src/styles.css 文件：

body {
    background: red;
}

新建 app-demo-hmr/build/index.html 文件

新建配置文件 webpack.config.js

var path = require("path");
var webpack = require("webpack");
module.exports = {
    entry: {
        app: ["./src/main.js"]
    },
    output: {
        path: path.resolve(__dirname, "build/"),
        publicPath: "/assets/",
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style!css'
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: 'build/',
        inline: true,
        hot: true
    }
};

4、运行命令

webpack-dev-serve

5、访问 http://localhost:8080/

Paste_Image.png

可以看到，项目已启动，可以正常访问。并且，在控制台中启动了热替换。

参考
https://segmentfault.com/a/1190000006964335
http://www.tuicool.com/articles/aiEva2Q