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属性

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

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

npm run dev
npm run dev

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

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

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

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

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

猜你喜欢

转载自www.cnblogs.com/singledogpro/p/12030655.html