vue.js学习笔记二十 一—— webpack-dev-server的常用命令与配置方式

1. 命令配置方式一：直接在webpack-dev-server后面追加参数（推荐方式）

1. 编译之后自动打开页面

通过 --open 来实现

例如："dev":"webpack-dev-server --open"

注意：修改package.json文件之后，需要重启webpack-dev-server

2. 修改端口号

通过 --port 来实现

例如："dev":"webpack-dev-server --open --port 6666"

3. 设置默认根路径

通过 --contentBase 来实现

例如："dev":"webpack-dev-server --open --port 6666 --contentBase src"

4. 设置热更新

通过 --hot 来实现

例如："dev":"webpack-dev-server --open --port 6666 --contentBase src --hot"

注意：当不设置hot的时候，每编译一次都会重新生成boundle.js文件，如果启动热更新，那么，不会每次都生成boundle.js文件，提高了运行效率。

2. 命令配置方式二：将参数信息以配置文件的形式放到webpack.config.js中

在 webpack.confg.js中，添加一个节点 devServer配置对象

devServer:{  // 这里是配置dev-server命令参数的
         //  --open --port 6666 --contentBase src --hot
         open:true,  // 自动打开浏览器
         port:7777,  // 指定端口号
         contentBase:'src',   // 指定托管的根目录 
         hot:true             // 启用热更新
     }

注意：这时候，启动webpack-dev-server 会报错，是因为启动hot热更新比较麻烦，需要配置很多东西。

1. 就是在devServer中配置hot:true

2. 需要在webpack.config.js中引入webpack模块

    const webpack = require('webpack');

3. 需要在和devServer平级的地方配置插件plugins

 plugins:[ // 配置插件的节点
         new webpack.HotModuleReplacementPlugin()  // new 一个热更新的模块对象，
     ]

注意：在webpack-dev-server中，所有后缀为s的节点都是一个数组，vue中，只有props是数组，其他的都是对象