vue ---- webpack中的插件 webpack-dev-server

在上一篇笔记中有一个简单的项目

上一个项目中的痛点（代码变后不能立即编译打包）

当修改偶数列为green后发现 页面效果并没有变,需要npm run dev一次才会重写打包代码

webpack如何解决该问题

安装和配置第三方的插件，常用的有
webpack-dev-server

• 类似于node.js用到的nodemon工具
• 每当修改源代码，webpack会自动进行项目的打包和构建

html-webpack-plugin

• webpack中的HTML插件（类似于一个模板引擎插件）
• 可以通过该插件自定制index.html 页面的内容

安装 webpack-dev-server

npm install webpack-dev-server@3.11.2 -D

配置

• 通过配置webpack-dev-server 插件
  ① 修改package.json -> scripts 中的 dev 命令如下：

package.json 

  "scripts": {
    "dev": "webpack serve"  
  },

②运行npm run dev,进行项目打包
③访问http://localhost:8080

如果报不能加载webpack-cli哪就安装一下,不指定cli的版本
npm install webpack-cli --save-dev
再使用npm run dev

访问后发现改完代码后，并没有变化

启动说明中说，output文件放入了/下

如果没改过输出目录，输出文件，默认是main.js,去访问下看看


代码