码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-04-12 16:42:33      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:scripts   2.3   pts   自定义   local   访问   pre   href   服务器端   

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)

标签:scripts   2.3   pts   自定义   local   访问   pre   href   服务器端   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!