[Webpack] webpack-dev-server

webpack-dev-server会在本地启动一个静态资源服务器，还可以监控代码的改动，
当文件发生变更时，自动刷新浏览器。

1. 在工程根目录中，初始化并安装依赖

$ npm init
$ npm i -g webpack webpack-dev-server
$ npm i -D webpack babel-core babel-loader babel-preset-es2015 babel-preset-stage-0

2. 配置webpack和babel

（1）webpack.config.js

const path = require('path');

module.exports = {

    // 编译入口，支持多入口
    // 本例中只有一个入口，名字为main（名字在后面会用到）
    // 相应入口文件地址为`./src/index.js`
    entry: {
        main: path.resolve('./src/index.js')
    },
    output: {
        // webpack打包结果输出文件夹
        path: path.resolve('./dist/'),

        // webpack打包结果文件名字
        // 其中name变量为入口的名字，为了支持多入口，
        // 本例中只会编译出一个文件main.js
        filename: '[name].js',

        // 配置webpack-dev-server打包文件路径
        publicPath: 'dev/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader'
            }
        ]
    }
};

（2）.babelrc

{
    "presets": [
        "es2015",
        "stage-0"
    ]
}

3. 新建src/index.js和index.html

（1）src/index.js

alert(1);

（2）index.html

4. 当前目录结构如下

.
├── index.html
├── package.json
├── src
│   └── index.js
└── webpack.config.js

5. 在工程根目录中，运行webpack-dev-server

$ webpack-dev-server

打开浏览器，

http://localhost:8080/index.html

会alert(1)。

修改src/index保存，浏览器会自动刷新。

6. 注意事项

（1）webpack --watch和webpack-dev-server都会用到webpack.config.js，
但是他们读取的配置项不同。

webpack --watch读取的是，entry，output.path和output.filename，
webpack-dev-server读取的是，entry，output.publicPath和output.filename。

因此，本例中，webpack --watch会打包生成./dist/main.js，
而webpack-dev-server会打包生成./dev/main.js。
使用webpack-dev-server的时候，index.html中应该引用./dev/main.js。

（2）webpack-dev-server在文件系统中，并没有实际生成文件
./dev/main.js只在内存中存在，在文件夹中是看不到的。

---

参考

webpack doc: webpack-dev-server