专注前端与算法的系列干货分享,欢迎关注(¬‿¬):
「微信公众号:心谭博客」| xin-tan.com | GitHub
0. 课程介绍和资料
本节课的代码目录如下:
本节课用的 plugin 和 loader 的配置文件package.json
如下:
{
"scripts": {
"dev": "webpack-dev-server --open"
},
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4"
}
}
1. 为什么需要开发模式?
在之前的课程中,我们都没有指定参数mode
。但是执行webpack
进行打包的时候,自动设置为production
,但是控制台会爆出warning
的提示。而开发模式就是指定mode
为development
。
在开发模式下,我们需要对代码进行调试。对应的配置就是:devtool
设置为source-map
。在非开发模式下,需要关闭此选项,以减小打包体积。
在开发模式下,还需要热重载、路由重定向、挂代理等功能,webpack4
已经提供了devServer
选项,启动一个本地服务器,让开发者使用这些功能。
2. 如何使用开发模式?
根据文章开头的package.json
的配置,只需要在命令行输入:npm run dev
即可启动开发者模式。
启动效果如下图所示:
虽然控制台输出了打包信息(假设我们已经配置了热重载),但是磁盘上并没有创建/dist/
文件夹和打包文件。控制台的打包文件的相关内容是存储在内存之中的。
3. 编写一些需要的文件
首先,编写一下入口的 html 文件:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"