npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 cnpm 模块
使用 cnpm 命令
cnpm i webpack-dev-server -D
安装 webpack-dev-server
把这个工具安装到项目的本地开发依赖,这个 工具的用法 和 webpack 命令的用法,完全一样。由于,我们是在项目中,本地安装的 webpack-dev-server , 所以,无法把它当做 脚本命令,在powershell 终端中直接运行;(只有那些 安装到 全局 -g 的工具,才能在 终端中正常执行)
使用 npm run dev
命令运行项目,注意事项
- 要在
package.json
文件中 添加 “dev”: "webpack-dev-server"
- 检查相关依赖
webpack-cli
和webpack
是否安装
注意,webpack-dev-server 这个工具,如果想要正常运行,要求在本地项目中,必须安装 webpack
如果没有安装使用如下命令进行安装
npm install webpack-cli -g
npm install --save-dev webpack
在安装以上2个模块出现错误可参考:
https://blog.csdn.net/qq_44989881/article/details/107711581
使用 npm run dev
运行项目
运行成功后会出现:
S M:\Node.js\07.webpack\2.webpack之plugin配置和使用\1.webpack-dev-server的基本使用\webpack-study> npm run dev
> webpack-study@1.0.0 dev M:\Node.js\webpack
> webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 8c933a449d24372a4e27
Version: webpack 3.12.0
Time: 597ms
Asset Size Chunks Chunk Names
bundle.js 624 kB 0 [emitted] [big] main
[1] multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
[2] ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
[3] ./node_modules/url/url.js 23.3 kB {0} [built]
[4] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
[6] ./node_modules/url/util.js 314 bytes {0} [built]
[7] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[10] ./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js 161 bytes {0} [built]
[11] ./node_modules/_ansi-regex@2.1.1@ansi-regex/index.js 135 bytes {0} [built]
[12] ./node_modules/_loglevel@1.6.8@loglevel/lib/loglevel.js 8.61 kB {0} [built]
[13] ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client/socket.js 1.08 kB {0} [built]
[15] ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client/overlay.js 3.67 kB {0} [built]
[21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[23] (webpack)/hot/emitter.js 77 bytes {0} [built]
[25] ./src/main.js 4.21 kB {0} [built]
[26] ./node_modules/jquery/dist/jquery.js 288 kB {0} [built]
+ 12 hidden modules
Project is running at http://localhost:8080/ :浏览器访问http://localhost:8080/ 即可看到运行的项目,并对项目中的文件可以进行访问。
注:
webpack-dev-server 帮我们打包生成的 bundle.js 文件,并没有存放到实际的物理磁盘上;而是,直接托管到了电脑的内存中,所以,我们在项目根目录中,根本找不到这个打包好的 bundle.js;我们可以认为,webpack-dev-server 把打包好的 文件,以一种虚拟的形式,托管到了项目的 根目录中,虽然我们看不到它,但是,可以认为 和 dist src node_modules 平级,有一个看不见的文件,叫做 bundle.js。
在项目中直接引用根目录的 bundle.js
即可。
每次修改文件项目中开发文件进行保存时,进行项目都会同步更新,无需重启和重新打包编译。
webpack: Compiling...
Version: webpack 3.12.0
Time: 18ms
Asset Size Chunks Chunk Names
bundle.js 624 kB 0 [emitted] [big] main
[21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[25] ./src/main.js 4.21 kB {0} [built]
+ 25 hidden modules
webpack: Compiled successfully.
使用 npm run dev2
运行项目
"dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
- open:每次运行项目自动打开浏览器
- port:项目运行占用的端口号
- contentBase :项目启动首次访问的目录
- hot:iframe 热替换模式,减少大量代码重复更新