【webpack】4.webpack-dev-server思考

webpack学习

【webpack】1.快速入门
【webpack】2.webpack核心–loader
【webpack】3. 将入口html也打包
【webpack】4. webpack-dev-server思考
【webpack】5.开发和生产模式的配置加载

1. 自动监控刷新 --watch

在package.json中配置

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "node_modules/.bin/webpack --watch"//实现自动监控
  },

加 --wacth 可实现自动监控打包，只要依赖里的js有变化和修改，就会自动打包，不用npm run pack,直接在页面刷新一次即可
但是package.json被修改时，要退出重新npm run pack
pack这个命令是自己设的，可以叫start,也可以叫dev,意思就是npm run XX等价于其后面的shell命令

2. 网页刷新 webpack-dev-server

现在可以自动打包了，但网页还是要自己刷新（f5）才能显现更新后的内容。想让其自动刷新要安装webpack-dev-server

准备条件

必须得配置过html-webpack-plugin才可以，具体见将入口html也打包

安装

npm i webpack-dev-server --save

运行

在项目目录下命令行输入

node_modules/.bin/webpack-dev-server --open

可以看出来开了一个server
没有装webpack-dev-server之前是打开本地文件，如下。（vscode是打开本地文件，webstorm开一个本地server，看不出对比效果）

现在就可以自动刷新了

不同

把之前生成的打包后的文件夹/文件删掉，运行node_modules/.bin/webpack-dev-server --open
可以发现，项目目录下没有出口文件，它把编译好的文件放到内存里，因为这个库只应该被用在开发环境，所以放在内存里，存取都非常快效率高。

配置

每次都输入那么长串太麻烦了，所把其配置在package.json的script里

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "node_modules/.bin/webpack --watch",
    "dev":"node_modules/.bin/webpack-dev-server --open"
  },

这样，之后直接运行npm run dev就是开server(开发环境)
npm run pack就是有打包后的文件

到这里就可以理解为什么vue我们npm run dev之后并没有看见打包后的文件，因为在vue-cli2中配置的是：“dev”: “node build/dev-server.js”
而npm run build则是有打包后的文件，发版时用打包后的文件