内容介绍:
一、上节代码
二、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"}
要确保自己安装了火狐的浏览器,然后就重启运行。