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,去访问下看看

代码

vue ---- webpack中的插件 webpack-dev-server相关推荐

解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require('axios') co ...
html 多个插件,webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不同的js文件）...
以html-webpack-plugin插件为例 1.先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完之后,在package.js的devDependen ...
npm的插件如何直接在html中使用,webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不一样的js文件）...
以html-webpack-plugin插件为例javascript 一.先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完以后,在package.js的d ...
vue项目中引入插件
(一)Vue引入jquer以及jquery插件步骤 (一)在package.json中添加 (二)安装jquery npm install jquery (三)修改build/webpack.base ...
使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)
本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本等可 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
webpack中的Loaders和plugin
什么是loader? 官方说明webpack 可以使用 loader 来预处理文件.这允许你打包除 JavaScript 之外的任何静态资源. Loader就是一个打包的方案,他知道对于某一个特定的文 ...
Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型
简要介绍:在webpack的官网,给出了十几种sourcemap,那么每一种sourcemap之间有什么区别,本文在理解sourcemap的基础上,分析在生产和开发环境中,应该采用何种形式的sourc ...
Vue 2 项目和插件使用
目录 Less ElementUI CDN NPM 完整引入按需引入全局配置 Vant CDN NPM 自动按需引入 (推荐) 手动按需引入导入所有组件 vuex(store) iconfont ...