1.先确保安装了最新版的Node.js和NPM,并已经了解NPM的基本用法

(以下使用cmd命令行进行)

2.安装webpack

  (1)全局安装

    $ npm install webpack -g

    (1)局部安装

    我并不喜欢全局安装这种方式,因为并不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。

    # 进入项目目录

    # 确定已经有 package.json,没有就通过 npm init 创建

     # 安装 webpack 依赖
     $ npm install webpack --save-dev
  (--save-dev会作为开发依赖来安装webpack。安装成功之后,在 package.json中会多一项配置
    
    )
3.安装webpack-dev-server(它可以在开发环境中提供很多服务,比如启动一个服务器、热更新、接口代理等)
  $ npm install webpack-dev-server --save-dev
  安装完成之后,最终的package.json文件内容为:
  

如果你的devDependencies中包含webpack和webpack-dev-server,恭喜你,已经安装成功!

使用webpack---安装webpack和webpack-dev-server的更多相关文章

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

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  2. 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  3. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  4. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  5. [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 serv ...

  6. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  7. webpack安装入门

    这两天心血来潮,突然想研究下webpack,花了一天时间,看网上有很多教程,不过发现安装的都是比较老的版本.后来发现还是我太年轻了,找技术播客还不如找官方网站.下面是一个webpack的官方网站,里面 ...

  8. webpack 安装,打包使用

      Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令  npm i webpa ...

  9. webpack安装以及一些配置

    在用webpack之前... 或说没有实现组件化之前的web1.0时代! 最终迈向web2..0之后的时代! ===============华丽的分割线================== 安装步骤有 ...

  10. nodejs,webpack安装以及初步运用

    nodejs安装: 1.下载:https://nodejs.org/en/download/ 2.安装node-v6.11.3-x64.msi文件,直接默认安装(next……): 3.验证是否完成安装 ...

随机推荐

  1. linux应用程序设计--Makefile工程管理

    Makefile文件描述了整个工程的编译.链接等规则.包括:工程中哪些源文件需要编译以及如何编译:需要创建哪些库文件以及如何创建这些库文件.如何产生最终的可执行文件. Makefile相关术语 1.规 ...

  2. vue+element项目中使用el-dialog弹出Tree控件报错问题

    1. 按正常的点击按钮,显示dialog弹出的Tree控件,然后把该条数据下的已经选中的checkbox , 用setCheckedNodes或者setCheckedKeys方法选择上 , 报下面这个 ...

  3. 【基础算法模拟+例题】-C++

    在漫长的刷题练习过程中,几乎所有稍微熟练一点的OIer都会,但是都几乎没有经过系统的学习,今天,我们就来讲讲模拟算法,也是为了复习emm. 定义? 定义?模拟还有什么定义吗? 那什么是模拟呢? 就是按 ...

  4. 洛谷P2057 [SHOI2007]善意的投票 题解

    题目链接: https://www.luogu.org/problemnew/show/P2057 分析: 由0和1的选择我们直觉的想到0与S一堆,1与T一堆. 但是发现,刚开始的主意并不一定是最终的 ...

  5. 转载——Asp.Net MVC+EF+三层架构的完整搭建过程

    转载http://www.cnblogs.com/zzqvq/p/5816091.html Asp.Net MVC+EF+三层架构的完整搭建过程 架构图: 使用的数据库: 一张公司的员工信息表,测试数 ...

  6. 解密Kafka吞吐量高的原因

    众所周知kafka的吞吐量比一般的消息队列要高,号称the fastest,那他是如何做到的,让我们从以下几个方面分析一下原因. 生产者(写入数据) 生产者(producer)是负责向Kafka提交数 ...

  7. 用python输出回文数

    一个b站上的朋友问我,怎么返回五位数的回文数的个数. 我首先百度回文数的概念,就是正读和倒读都一样的数字,例如:10001,99899 等等 数字的位数拆分一头雾水,思来想去,用字符串的方法完美解决! ...

  8. springboot的邮件服务

    作者:纯洁的微笑出处:http://www.ityouknow.com/ 版权归作者所有,转载请注明出处 springboot仍然在狂速发展,才五个多月没有关注,现在看官网已经到1.5.3.RELEA ...

  9. JDK容器类Map源码解读

    java.util.Map接口是JDK1.2开始提供的一个基于键值对的散列表接口,其设计的初衷是为了替换JDK1.0中的java.util.Dictionary抽象类.Dictionary是JDK最初 ...

  10. Chrome 使用 Evernote 插件

    Chrome 插件不能登印象笔记进行裁剪,被困扰有段时间了.昨天偶然在知乎上找到了解决方法: 链接:https://www.zhihu.com/question/20340803/answer/291 ...