webpack入门的注意事项-启动webpack-dev-server

启动webpack-dev-server

写在前面的话

webpack入门常遇到的一些简单问题，做一个个人的小小记录！
webpack使用的版本为： 2.2.0
webpack-dev-server使用的版本为： 2.2.0

注意事项

1、安装webpack与webpack-dev-server

网络上有很多关于webpack和webpack-dev-server的教程，但是要注意webpack和webpack-dev-server的版本，由于版本的问题会导致很多异常。
推荐安装版本为 webpack: 2.2.0 与 webpack-dev-server: 2.2.0；

// webpack
npm i webpack@2.2.0 --save-dev
// webpack-dev-server
npm i webpack-dev-server@2.2.0 --save-dev

如果需要卸载可以参考下面的命令

// webpack
npm uninstall webpack --save-dev
// webpack-dev-server
npm uninstall  webpack-dev-server --save-dev

2、配置webpack-dev-server，并且启动热模块

先注意，由于webpack-dev-server启动生成打包文件（js文件）是虚拟文件，即没有生成实体文件，是存放在内存中的，所以启动webpack-dev-server发现没有打包文件是正常的。
热启动模块有iframe模式和inline模式，iframe模式比较简单，建议入门使用iframe模式，此处也是以iframe模式为例子。

需要注意的为devServer和plugins的参数，其他的参数按自己的项目来配置。
配置文件webpack.config.js，：

// webpack.config.js

var path = require('path'); // 用于获取配置文件所在的路径
var webpack = require('webpack');

module.exports = {
    // 配置生成Source Maps，选择合适的选项
    // 开发环境建议使用：eval-source-map；\
    // 生产环境建议使用：source-map
    // cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑da时间成本是使用。
    devtool: 'eval-source-map', 
    entry: [
        // 增加一个脚本当发生改动的时候去自动刷新应用，需要在配置中增加一个入口点。
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:10001',
        // 入口文件所在路径
        __dirname + "/src/js/test-server/main.js"
    ],
    output: {
        path: __dirname + "/test-server/js",
        filename: 'test.js'
    },
    module: {
        loaders: []
    },
    // 设置测试服务
    devServer: {
        // 本地测试服务器加载的页面所在的目录，默认webpack-dev-server会为根文件夹提供本地服务器
        contentBase: "./test-server",
        // 监听的端口，默认为8080
        port: 10001,
        // 不跳转
        historyApiFallback: true
    },
    plugins: [
        // 热更新模块需要的配置
        new webpack.HotModuleReplacementPlugin()
    ]
}

启动测试服务的方法，由于我们在webpack.config.js中配置了devServer，因此直接在命令行中输入：

webpack-dev-server

在浏览器里预览，打开网址http://localhost:10001/webpac...，格式为：

http://«host»:«port»/webpack-dev-server/«path»

资料推荐

webpack的详细说明：入门 Webpack，看这篇就够了