webpack 4.x 解决 webpack-dev-server工具在webpack构建的项目中使用问题

首先将webpack-dev-server安装到项目中

npm install webpack-dev-server -D

这时在powershell中敲 webpack-dev-server 会发现

‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序
或批处理文件。

这是由于该工具只是安装到本地项目中了

纳尼? 难道要全局安装一下吗???

没必要!!!这时只需在根目录的package.json中"scripts"下中添加

"dev": "webpack-dev-server"

即可使用 npm run dev 来运行项目了

但是笔者在运行项目时 报了以下错误:

该问题的出现是由于webpack没有安装到项目中导致的;只需要将之安装到项目中即可:

npm install webpack -D

但是 运行依然出错:

此问题的出现 通过查阅得知 应该是 webpack 与 webpack-cli版本不一致导致的

于是:

npm uninstall webpack -Dnpm install webpack webpack-cli -D 

然后 npm run dev 运行成功

原文地址:https://www.cnblogs.com/ifeil/p/9907566.html

时间: 2024-11-12 04:12:22

webpack 4.x 解决 webpack-dev-server工具在webpack构建的项目中使用问题的相关文章

解决新版本webpack vue-cli生成文件没有dev.server.js问题

新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') const express = require('express') const app = express() const apiRoutes = express.Router() app.use('/api', apiRoutes) 然后找到devserver 这里可以配置路由 devServe

在webpack构建的项目中使用vue

一.复习在普通网页中使用vue1.使用script引入vue2.在index中创建 id为app的容器3.通过new vue得到vm实例二.在webpack中尝试使用vue://注意 : 在webpack中 使用 import Vue from 'vue' 导入的Vue构造函数,功能不完整,只提供了runtime-onley的方式 病没有提供想网页中那样的使用方式npm install vue -S import Vue from 'vue'// import Vue from '../node

[Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the host option. This lesson walks you through accessing webpack dev server using an iPhon Ch

笔记:配置 webpack dev server

笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 启动 webpack-dev-server 原文地址:https://www.cnblogs.com/F4NNIU/p/webpack-dev-server.html

Webpack Dev Server + React Hot Loader

1.安装 npm install webpack-dev-server react-hot-loader --save-dev 2.配置server.js var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); new WebpackDevServer(webpack(config), { pu

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev 2.在webpack.config.js文件中,引入html-webpack-plugin插件 3.输入命令:npm run webpack,编译打包 可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此

gulp和webpack的区别,是一种工具吗?

背景: 最近收到很多童鞋的问题:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 基于此问: 我简单归结了一下区别和概念,让需要的同学阅读理解,从而不把时间浪费到这种模糊不清的选择问题上! --------------------------------------------------------------------------------------------------------------------------------

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目

Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统.基于webpack构建,并进行默认配置,可通过插件扩展,可升级: vue-cli帮我们创建基本项目结构,跳过繁琐的项目配置环节,将精力集中在业务上: vue-cli的版本: @vue/cli 3.x版本:点击前往官网 vue-cli 2.x版本:点击前往官网 安装vue-cli $ npm install -g vue-cli 安装成功,查看其版本: 使用we

webpack构建vue项目(再谈配置)

webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的解决,最后索性将vue升级到2+,竟然就能识别了,好吧! 1.先分享一下webpack配置vue2+的一些不同(本人亲测): (1)dependencies中的vue默认安装2+,直接运行,会报如下错:[Vue warn]: Failed to mount component: template o