webpack-dev-server的使用

使用webpack-dev-server这个工具，来实现自动打包编译功能

1.运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发环境

2.安装后，用法和webpack用法完全一样

3.由于我们是在项目中安装的，所以无法把它当做脚本命令直接运行（只有全局安装-g才能运行）

4.webpack-dev-server运行前必须要在本地安装webpack

5.webpack-dev-server帮我们打包的bundle.js文件，并没有存放到实际的物理磁盘上，而是直接托管到了 电脑的内存中，所以在项目的根目录下找不到 这个打包好的  bundle.js

6.我们可以认为，webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到我们项目的根目录上

可以认为，在根目录里有一个看不见的bundle.js,这样做就一个原因：更新代码速度快！

 

webpack-dev-server配置参数：

方式一：比较简便

在package.json里配置scripts属性

"scripts": {
    "dev":"webpack-dev-server --open --port 3000  --contentBase src --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

--open   表示打包完成自动打开浏览器

--oprt 3000   表示手动设置启动端口号3000

--contentBase src    表示设置浏览器打开首页为src

--hot    表示热更新，实现局部更新代码，减少不必要的代码更新

 

方式二：

1.在webpack.config.js配module.exports

module.exports = {          //node语法
    entry: path.join(__dirname,'./src/js/main.js'),    //入口表示要打包哪个文件
    output: {            //输出文件相关配置
        path:path.join(__dirname,'./dist'),      //指定打包好的文件，输出到哪个目录去
        filename:'bundle.js'      //指定输出的文件的名称
    },
    devServer:{        //这是配置 dev-server命令参数的第二种方式，相对来说麻烦一点
        open:true,     //自动打开浏览器
        port:3000,     //设置启动端口
        contentBase:'src',  //设置启动首页
        hot:true,      //启用热更新第一步
    },
    plugins:[          //配置插件的节点
        new webpack.HashedModuleIdsPlugin()   //启动热更新第三步，new-个热更新的模块对象
    ]
}

2. 在webpack.config.js开头导入webpack

const webpack = require('webpack') //启动热更新第二步