开发者学堂课程【React 入门与实战：webpack-dev-server 的基本使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8079
webpack-dev-server 的基本使用
内容介绍：
一、上节代码
二、main.js 文件
三、下载 webpack-dev-server
四、设置自动打开网页
一、上节代码
代码：
将入口文件的 ok 改为 ook
<!DOCTYPE html>
<htm1 lang= "en">
<head>
<meta charset="UTF- 8">
<meta name="viewport" content=”width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>index首页</title>
<script scr =”../dist/main.js”></ script >
</head>
<body>
<h1>这是首页</h1>
</body>
</html>
二、main.js 文件
代码：
//假设，main.js 还是我们的入口文件
Console.log(‘ook’)
保存后在网页里面刷新（刷新后结果如下：）
为什么没有变呢（应该变为 ook ）？原因在于并没有重新打包，所以运行后在网页里面刷新结果还是没有变。在 index.html 中，去手动导入了一个 main.js 这个包，这是上次已经打包的文件，但是这个次代码有变化，就要重新打包。像这样每次代码改变都要去打包，是很麻烦的，所以要去配置一下实时的打包编译，在软件终端上输入代码（代码如下：）
代码：
npm i webpack-dev-server -D
server 之前是这么配置的现在也是这么配置，它提高了我们打包的速度，提高了编写代码的效率，提高了一些默认的约定。（详细讲解如下：）
代码：
//向外暴露一个打包的配置对象;―因为 webpack 是基于 Node 构建的;所以 webpack支持所有 Node API 和语法
module.exports = {
mode : 'development' , // development production
//在 webpack 4.x 中，有一个很大的特性，就是约定大于配置﹑约定，默队的打包入口路径是
src -> index.js
}
//行不行?目前不行;
//这是 Es6 中向外导出模块的APT 与之对应的是 import ** from‘标识符
// export default {}
//那些特性 Node 支持呢?如果 chrome 浏览器支持哪些，则 Node 就支持哪些;
三、下载webpack-dev-server
下载完成之后打开 package.json 这个个文件，继续在下面些 diamagnetic。（代码如下：）
代码：
{
"name":"01.webpack-base" ,
"version": "1.o.o",
"cescription": ""，
"main": "index.js" ,
"scripts": {
"test": "echo \ "Error: no test specified\ " && exit 1",
"dev": "webpack-dev-server"
}
"keywords": [],
"author": "",
然后在终端运行代码（npm run dev），在执行的时候它自己回去我们的代码里面找这个脚本，看见 Compiled successfully .就是编译成功了。之前编译成功就退出了，现在执行了没有退出，因为它要观察自己的代码变化，只要你的代码变化它这里就会更改。当前项目运行在: Project is running at http://localhost:8888/当前本机的8080端口上，webpack output is served from /表示当前项目运行在本机的跟路径上，可以进去这个路径下看看（如下图：）
在这里面有创建的项目,在访问这个路径 http://localhost:8888/main.js就是 js 文件。
进入到项目中查看原代码，里面还是 ok，但是我们写入的 ook。在到原代码中可以看到，我们选着的路径是 ok 打包的路径<script src=" ../dist/mnain.js"></script>。在网页可看见，在我们的网页里面是没有 main.js 这个选项得，它生成之后就把这个生成的东西传入到库里面，没有显示在本地的磁盘里面，但是想使用main.js 的时候就直接在些根目录下 main.js 就可以了（详细看下代码：）
代码：
// webpack-dev-server 打包好的 main.js 是托管到了内存中;所以在项目根目录中看不到;
//但是,我们可以认为，在项目根目录中，有一个看不见的 main .jsI
如何写 index.html 代码？
代码：
将入口文件的 ok 改为 ook
<!DOCTYPE html>
<htm1 lang= "en">
<head>
<meta charset="UTF- 8">
<meta name="viewport" content=”width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>index首页</title>
<script scr =”../dist/main.js”></ script >
</head>
<body>
<h1>这是首页</h1>
</body>
</html>
刚刚它把
<script scr =”../dist/main.js”></ script >
位置写死了，但是在我们的更目录下，所以把
<script scr =”../dist/main.js”></ script >
改为
<script scr =”/main.js”></ script >
就可以了。
然后在到网页上去刷新，原先的 ok 就会变成 ook 了
四、设置自动打开网页
在"dev"里面添加"dev": "webpack-dev-server --open --port 3oo0 --hot –127.0.0.1"},就可以实现项目运行后网页自动打开。
代码：
{
"name": "o1.webpack-base" ,"version": "1.0.0"" ,
"description": ""，"main" : "index .js" ,"scripts": {
"test": "echo \ "Error: no test specified\ " && exit 1""，
"dev": "webpack-dev-server --open --port 3oo0 --hot –127.0.0.1"},
}
"keywords": [],
"author" : "",
""license": "ISC" ,
"devDependencies" : {
wnnoaao~"webpack" : "^4.1.1",
"webpack-cli": ""^2.0.12",
"webpack-dev-server": "少3.1.1"}
}
最后出现像下图这个样子的网页（看下图：）
如果想要其它浏览器来打开的话，就在
"dev": "webpack-dev-server --open --port 3oo0 --hot –127.0.0.1"}
里面的open后面加上浏览器的英文名，
例如：
火狐 "dev": "webpack-dev-server –open firefox --port 3oo0 --hot –127.0.0.1"}
要确保自己安装了火狐的浏览器，然后就重启运行。
