webpack插件之webpack-dev-server

Posted 2021-03-23 明奴

webpack插件之webpack-dev-server

webpack插件 自动化 webpack-dev-server 

现在只需要使用 npm run build指令就可以自动打包，并自动处理好各种依赖关系，但还是存在一个问题，

如果对js文件的代码进行了修改，又要重新打包才能测试，很明显又要手动操作

---

在开发测试过程中，我们会经常修改代码后，然后频繁刷新页面查看效果.对于我们前端仔来说，每次修改代码后都需要重新编译才能测试。这个过程非常繁琐，这简直是个深坑，不能忍啊。使用webpack-dev-server插件，搭建本地服务器，监听入口文件和其它被它引用（导入）的文件，只要我们对文件进行修改后，就重新编译,并通知浏览器自动刷新显示我们修改后的结果。

webpack-dev-server插件使用流程:

1.安装 webpack-dev-server
npm i --save-dev webpack-dev-server

2.安装完成后该服务器并不会立刻生效，需要修改下webpack.config.js，添加devServer属性。

添加devServer属性

■devserver虽然是webpack中的一个属性，但它本身也是个对象，也有它自己的成员属性：
口contentBase：静态资源目录 ，我们这里要填写，/dist
口inline：页面实时刷新

3.由于webpack-dev-server不是全局安装的，不能直接在控制台/终端使用指令【无法把它当作脚本命令，在powershe;;终端中使用。只有那些安装到全局-g的工具，才能在终端中正常执行】，此时我们还需要在package.js的scripts字段内配置相应的指令。由于是开发时编译，而不是打包，在script字段后添加=="dev": "webpack-dev-server"==,

npm run dev

4.在控制台输入npm run dev启动本地服务器，点击打开该url就能看到效果。

输入npm run dev就跑在8080端口，点击打开该url,

5.当项目内资源发生改变时，就会自动编译。如果想修改并编译后无非点击上述url,需要配置package.js内的devServer参数。需要注意的时，编译后的文件并不会在磁盘生成。

只要修改了项目的内容，就自动编译

如果想编译成功后，自动打开浏览器，给dev属性添加--open参数