webpack-服务和热更新

今天来分享一招,看标题,热更新,其实就是即写即现,当然如果你用的是双屏电脑这样更便于开发,就能及时看到你所要的效果。

设置webpack-dev-server
在设置webpack-dev-server前要npm install webpack-dev-server ––save-dev下载,然后配置devServer,简单的配置devServer只有四项。如下代码:
/webpack.config.js

devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址,可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号,建议不使用80,很容易被占用,这里使用了4350,你也可以用自己喜欢的数字来作为端口号
        port:4350
    }//配置webpack开发。服务配置服务器基本运行路径,用于找到程序打包地址

安装失败原因:
- 我安装的时候有个ERR报错,原因是缺少文件,这个我就不知道缺少哪个文件了,不过肯定是node_modules里缺少了,因为我做这个之前看这个文件多东西了,就傻傻的删除了,应该都是有用的文件,所以小伙伴们在下载完每一项的时候都注意一下。之后就用到之前我说的方法,把这个文件夹删除,重新建立npm install,然后再npm run server看效果。
- 若还是有问题,就是显示无法找到内部或外部命令(或者其他)可以在package.json文件中这样修改:

"scripts": {
    "server": "webpack-dev-server --open"
  },

–open就是你运行完后自动给你打开网页的一个写法,就不需要你还要复制了网页链接再去浏览器打开了。

所以要成为一个优秀的开发者不止要细心还有重视出过的错并把它记录下来。

你可能感兴趣的:(webpack)