webpack入门到进阶（三）- devServer

devServer安装使用

 我们在上篇文章提及到：在webpack.config.js中配置watch:true，可以检测文件改变，进行打包。还有本篇文章介绍的devServer可以实现。

本篇文章，我们介绍下devServer的安装配置，使用devServer进行项目开发。（更推荐使用devServer）devServer为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能。

首先我们需要知道，devServer是依赖webpack的。我们肯定需要先安装webpack,然后安装devServer到当前项目。

cnpm i webpack-dev-server -D

然后，我们在package.json文件中配置脚本执行命令

  "scripts": {
    "bulid": "webpack --config webpack.production.js",
    "dev":"webpack-dev-server"
  }

 命令台执行即可打包项目。

npm run dev

 

我们可以看到，项目运行在http://localhost:8080/。

其次：我们要注意的是：webpack output is served from /。打包输出的文件在服务器的内存里。文件名：bundle.js

之前我们打包输出的文件是在：dist/目录下。

所以：我们要修改index.html的文件引入路径：

之前是：<script src="./dist/bundle.js" ></script>。改为：<script src="/bundle.js" ></script>

否则，你会发现你改变的index.js文件里面的内容，并不能展现出来。

我们继续配置命令行，修改后需要重新执行：npm run dev

"dev":"webpack-dev-server --port 8080"

//--port修改端口号为8080

"dev":"webpack-dev-server --port 8080 --hot"

//--hot开启热加载。当你修改文件后，直接保存后，你浏览器打开的项目就会自动刷新。

"dev":"webpack-dev-server --port 8080 --hot --open"

//--open执行npm run 命令后会自动打开浏览器。

ps：以上配置内容写法，现在在新版本的webpack中，可以直接在，webpack.config.js中直接进行配置。如下：

  devServer:{
    open:true,
    hot:true,
    port:8080,
  }

而package.json的文件直接是：

  "scripts": {
    "bulid": "webpack --config webpack.production.js",
    "dev":"webpack-dev-server"
  }

这样也是可以的。。。哈哈，写完啦。

 

下篇：（四），webpack-loader详解