分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

webpack最佳入门实践系列(4)

发布时间:2023-09-06 01:49责任编辑:苏小强关键词:webpack

4.devserver

webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。

4.1.安装webpack-dev-server

npm install webpack-dev-server --save-dev

  

修改package.json配置文件,在script选项中加入下面代码:

"start": "webpack-dev-server",

  

整个package.json配置文件如下:

{ ?"name": "code", ?"version": "1.0.0", ?"description": "", ?"main": "index.js", ?"scripts": { ???"dev": "./node_modules/webpack/bin/webpack.js", ???"start": "webpack-dev-server", ???"test": "echo \"Error: no test specified\" && exit 1" ?}, ?"keywords": [], ?"author": "", ?"license": "ISC", ?"devDependencies": { ???"html-webpack-plugin": "^2.30.1", ???"webpack": "^3.10.0" ?}}

  

在终端运行命令:

npm start

  

命令启动后,通过http://localhost:8080/ 访问

4.2.让工具自动给我们打开服务器地址

在webpack.config.js中添加配置

devServer:{ ???open: true}

  

其中open:true 表示自动打开浏览器

4.3.修改服务器端口

在webpack.config.js中添加配置项目

devServer:{ ???open: true, ???port: 8090}

  

其中port后面给一个自定义端口

4.4.设置默认访问目录

devServer:{ ???open: true, ???port: 8090, ???contentBase: ‘./dist‘}

  

 

webpack最佳入门实践系列(4)

原文地址:https://www.cnblogs.com/nodeing/p/8808590.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved