devserver 简介 --webpack-dev-server解决的问题
-提供http服务
-监听文件变化、实时刷新
-支持Source Map 方便调试
上代码
1.安装webpack-dev-server
npm i -D webpack-dev-server
- 运行webpack-dev-server命令
node_modules/.bin/webpack-dev-server
网上给的webpack-dev-server命令是错误的，不能够正常运行！！！
网上给的webpack-dev-server命令是错误的，不能够正常运行！！！
网上给的webpack-dev-server命令是错误的，不能够正常运行！！！
记住是 node_modules/.bin/webpack-dev-server!!!
记住是 node_modules/.bin/webpack-dev-server!!!
记住是 node_modules/.bin/webpack-dev-server!!!
用webpack-dev-server折腾了半天，报以下错误
webpack-dev-server : 无法将“webpack-dev-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试
一次。
所在位置 行:1 字符: 1
+ webpack-dev-server ./webpack.config.js
+ ~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (webpack-dev-server:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
全局安装npm i -D webpack-dev-server -g报找不到webpack模块，估计webpack也全局安装估计能解决的，但是
与项目的构建相悖，大部分项目我们是只在项目安装webpack的相关依赖。
最后用 node_modules/.bin/webpack-dev-server解决了问题的，有知道原因的仁兄请您留言给我。
- 运行后控制台会答应出很多东西，列出以下有用的部分
PS E:\demo\webpack\demo1.2-devserver> node_modules/.bin/webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from E:\demo\webpack\demo1.2-devserver
i ｢wdm｣: Hash: 820c714fe24d911744ea
Project is running at http://localhost:8081/的就是告诉我们，我们运行的服务运行在什么地方。
在浏览器打开可以浏览页面。到此已经完成了，简单的devServer的搭建。
此时修改了页面一些内容，然后保存了一下，控制台貌似在编译，但是刷新页面并没有什么变化。
- 修改
webpack.config.js为下面内容。
const path= require ('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { join } = require('path');
module.exports = {
entry:'./app.js',
output: {
filename:'bundle.js',
path: path.resolve( __dirname,'dist')
},
module:{
rules:[
{
test:/\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
devServer: {
contentBase: path.join(__dirname, "dist"), //指定生成的地址
hot: true, // 热更新
inline:true, //自动更新
host: 'localhost',
port: 8081,
open: true
},
plugins:[
new MiniCssExtractPlugin(
{
filename: `[name].css`
}
)
],
mode: 'none'
}
跟以往的配置比多了devServer。
-
contentBase指定运行环境目录 -
hot热更新， 貌似不配置此项也可以热更新？？？ -
inline自动更新貌似不加也可以自动更新？？？ -
host运行环境地址如果设置'0.0.0.0'允许其他浏览器访问, localhost 只能本机访问 -
port运行端口 -
open是否自动打开浏览器
- 此时运行
node_modules/.bin/webpack-dev-server
如果项目没有打包过，会发现不能访问
cann`t get/
没关系，因为现在访问的是dist目录，没有dist当然是找不到了。
- 创建文件，复制html
创建dist文件夹mkdir dist
进入dist目录cd dist
创建index.html文件type > index.html
*当然也可以手动创建，介绍的命令是基于window
修改index.html
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> </head>
<link href="./main.css" rel="stylesheet" type="text/css" />
<body> <div id="app" ></div>
<script src="./bundle.js"></script>
</body>
</html>
- 修改一下试试，完美实现了热更新.但是每次输入很长的命令有点不优雅。
npm run dev是比较优雅的操作
修改package.josn
script添加一行
"dev":"node_modules/.bin/webpack-dev-server"
附上package.josn代码
{
"name": "demo1.1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"dev":"node_modules/.bin/webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^4.2.2",
"mini-css-extract-plugin": "^0.11.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
上一篇 3. webpage4.0 mini-css-extract-plugin插件简单介绍
下一篇 5.webpack配置简介-入门集
网友评论