屌丝晋级webpack之第三节 热启动 webpack-dev-server使用

今天我们开始webpack的一些高级用法，首先从热启动webpack-dev-server的使用开始默认使用我们上节的demo-5源码工程
1.安装webpack-dev-server

命令：cnpm install webpack-dev-server -g

3.3种运行webpack-dev-server的方式

1.webpack-dev-server --prot 8888 //命令方式

2.在config配置文件中自定义端口方式

此时直接运行：webpack-dev-server

发现页面不能热刷新原因如下
1.webpack-dev-server并不能读取你的webpack.config.js的配置输出

你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用

2.webpack-dev-server打包生产的文件并不会添加在你的项目目录中！
它默认打包的文件名是第一次启动项目时的文件名，存于内存中，不会真的出现在你的项目目录中。

所以你需要将index.html中引用的js修改

此时运行
webpack-dev-server
ok

3.在packge.json中配置脚本命令

module.exports = {
     
    entry:'./src/a.js',//webpack打包的入口文件
    output:{
     
        filename:'./main.js',//从4.0版本后默认路径在“dist”下，
    },
    "devServer": {
                       
        "open": true,                 // 服务器启动成功后，将自动打开浏览器
        "hot": true,                  // 启用模块热替换功能.此功能需要和HotModuleReplacementPlugin配合使用
        "port": 8088,                // 端口
        "openPage":"./index.html"                   //默认页面
    },            
    module:{
     
        rules:[      //老版本是loaders
            {
     
                test:/\.css$/,    // 匹配css文件
                loader:'style-loader!css-loader',  //!连接符号两边不能有空格
            }
        ]
    }
}

第三种方式才是项目中通用的配置，前两者可以作为开发者工具灵活使用

3.结束语

webpak对于开发者构建自己的web站点而言极其方便，还记得曾经为了建一个站点去自己搭建各种服务器，iis tomcat ngix 的麻烦吗？