webpack

最新推荐文章于 2022-11-21 14:36:14 发布

指尖仗剑天涯

最新推荐文章于 2022-11-21 14:36:14 发布

阅读量493

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack-dev-server webpack 文章标签： webpack webpack-dev-server npm run dev 热部署

本文链接：https://blog.youkuaiyun.com/uciiiii/article/details/91402157

webpack-dev-server 同时被 2 个专栏收录

1 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

本文介绍了如何安装和使用webpack及webpack-dev-server进行项目开发，包括安装cnpm、配置webpack-dev-server实现热加载和自动刷新浏览器，以及如何进行debug调试。在package.json中配置scripts，启动dev服务器，并在代码中添加debugger进行调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack

本教程安装node.js在D:\nodejs下所以执行命令如下：
npm config set prefix "D:\nodejs\npm_modules" 
npm config set cache "D:\nodejs\npm_cache"
此时再使用 npm config ls 查询NPM管理包路径发现路径已更改安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v
nrm ls 查看镜像已经指向taobao nrm use taobao切换镜像

1.安装webpack指定的版本3.6.0（之前安装好nodejs，-g全局）

npm install webpack@3.6.0 -g

在这里插入图片描述
2.webpack查看安装成功

webpack-dev-server开发服务器

它的功能可以实现热加载并且自动刷新浏览器
1.打开程序目录
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

2.配置webpack-dev-server
在package.json中配置script

 "scripts": {     "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"   },

–inline：自动刷新 --hot：热加载
–port：指定端口 --open：自动在默认浏览器打开 --host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
3.npm run dev启动
或使用idea或webstorm，右键package.json文件，选择“Show npm Scripts”，双击 dev
4.debug调试：与微信小程序一样通过debugger进行调试
配置如下：
1、在webpack.conﬁg.js中配置：

devtool: 'eval‐source‐map',

webpack.conﬁg.js部分内容如下：

var htmlwp = require('html‐webpack‐plugin'); 
module.exports={     
entry:'./src/main.js',  //指定打包的入口文件    
output:{         
	path : __dirname+'/dist',  //__dirname表示webpack.config.js所在目录的绝对路径         
	filename:'build.js'          //输出文件     
},     
devtool: 'eval‐source‐map',

2、在js中跟踪代码的位置上添加debugger
一个例子：
在add方法中添加debugger

启动应用，刷新页面跟踪代码：
此时可以使用chrome进行调试了。