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. python 2.7 - 3.5 升级之路 (二) : 语法与类库升级

    背景 在上一篇博文中,我们为升级python 2 -> 3已经做了一些准备.在这篇中,我们将针对语法与类库这两个方面进行讨论. 关于语法 1. print 在python3中, print 已经 ...

  2. [leetcode] #213 House Robber II Medium (medium)

    原题链接 比子母题House Robber多了一个条件:偷了0以后,第n-1间房子不能偷. 转换思路为求偷盗[0,n-1)之间,以及[1,n)之间的最大值. 用两个DP,分别保存偷不偷第0间房的情况. ...

  3. iOS中基于协议的路由设计

    一.背景 前段时间对我们自己的App做了结构上的重构,抛弃了之前简单的MVC开发模式,原因是随着App的业务线越来越多,单个页面的功能越来越复杂,MVC开发模式导致整个Controller-layer ...

  4. 详解iframe与frame的区别

    iframe与frame的区别 一.使用iframe的优缺点 优点: 1.程序调入静态页面比较方便; 2.页面和程序分离; 缺点: 1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外 ...

  5. 第三章 jsp数据交互(二)

    Application:当前服务器(可以包含多个会话):当服务器启动后就会创建一个application对象,被所有用户共享page.request.session.application四个作用域对 ...

  6. 01-k8s 架构

    原文地址:https://github.com/kubernetes/kubernetes/blob/release-1.3/docs/design/architecture.md Kubernete ...

  7. 原生应用使用cordova并与h5应用分离

    个人原创地址:https://www.jianshu.com/p/1ad536e76640 1.需求与使用场景   打开一个新页面,要求能够加载本地zip格式的h5应用,该应用使用了某些原生能力:能够 ...

  8. 【iOS】删除 main.storyboard 的问题

    一直没用 main.storyboard, 后来索性把它删了,结果还出了问题: Terminating app due to uncaught exception 'NSInvalidArgument ...

  9. codeforces 371A K-Periodic Array

    很简单,就是找第i位.i+k位.i+2*k位...........i+m*k位有多少个数字,计算出每个数出现的次数,找到出现最多的数,那么K-Periodic的第K位数肯定是这个了.这样的话需要替换的 ...

  10. 后端小白的VUE入门笔记, 前端高能慎入

    因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还 ...