我们开发时候肯定是希望用localhost的方式 或者一个ip地址的方式来访问我们自己的页面,不会想用file:///D:/code/nodejscode/webpack_demo/dist/inedex.html此种方式,这个时候我们就希望开启一个服务,在当前build目录下,生成这样的一个文件,
webpack 也内置了一个开发服务,通过impress 实现这样一个静态服务,
可以在命令中 yarn add webpack-dev-server -D 其中-D也是开发依赖,

也可以npx webpack-dev-server (或者配一个脚本?怎么配?),它的好处是不会真实的打包文件,而是生成所谓内存中的打包,把文件写入内存中,
webpack创建服务
此时我们可以访问 http://localhost:8080/
webpack创建服务
此时它默认以当前目录生成了个静态目录,
但我们希望它可以自动进入build 里打开页面,所以我们需要在webpack.config.js中设置,
module.exports:{
devServer : { //开发服务器的配置
port:3000 ,//自定义访问的端口号
progress:true,
contentBase:’./build’ //指定运行目录
}
}
此时我们将命令webpack-dev-server 加入到package.json 中,方便以后run
webpack创建服务

此处应该配置为 “dev”: “webpack-dev-server --config webpack.config.my.js”,上图配错.
至于怎么发现的,当我运行npm run dev 后再访问3000端口,此处目录下没有index.html 这些dist目录下的文件,我就知道了3000端口的程序运行的目录不在dist,而是其他地方,但webpack.config.my.js 文件没有写错,唯一可能性是此时node 并没有调用webpack.config.my.js 文件,而是用的默认的webpack.config.js 这个默认文件!!!!

所以,我打开了package.json重新编辑了下 dev命令,再次回到cmd中运行npm run dev,此时又提醒 Error: listen EADDRINUSE: address already in use 127.0.0.1:3000,也就是说3000正在运行,我不能在用这个端口了。所以决定杀死程序,重新启动3000。
故用查看进程的方式(netstat -ano查看所有进程windows的cmd命令之一) 找到3000这个进程的pid,从而又找到 node.exe 是此进程的应用程序(windows cmd命令行窗口中敲入tasklist回车可查看 所有正在运行的程序,也可以在task manager中查看),解决办法是kill该进程(tskill 7140,也可以等一会,他自己就死了。。)
webpack创建服务webpack创建服务
此时我们想能自动配置到index.html中,故引入插件 html-webpack-plugin ,
调用 yarn add html-webpack-plugin -D
webpack创建服务
此时编辑webpack.config.my.js
webpack创建服务
但还没有装上插件(因为网速慢),报错信息 Error: Cannot find module ‘html-webpack-plugin’
,细节如下图:
webpack创建服务
要思考的问题:
yarn.lock 文件是什么,有什么作用?
为什么是devServer这个节点? 因为命令是webpack-dev-server,我猜是死规定,没有为什么。
webpack devserver的说明
一般我们在项目中 如果用webpack的话,基本都会用到webpack-dev-server,配置大致如下:

devServer={
contentBase: basePath,
historyApiFallback: true,
hot: true,
devtool: ‘eval’,
host: ‘0.0.0.0’,
port: 3009,
inline: true,
noInfo: false,
// proxy: {
// ‘*’: {
// target: ‘http://localhost:8088’,
// secure: false
// // changeOrigin: true
// }
// }
};

相关文章:

  • 2022-01-18
  • 2022-01-15
  • 2022-02-05
  • 2021-07-06
  • 2021-10-19
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-09-23
  • 2021-06-07
  • 2021-04-08
  • 2021-07-12
  • 2021-08-02
  • 2021-12-19
  • 2021-11-06
相关资源
相似解决方案