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. jira设置问题关闭之后不能继续编辑和添加备注

    设置工作流中的Closed步骤的工作流属性值,增加两个: jira.permission.comment.user:(空) jira.issue.editable:false Closed这个步骤之后 ...

  2. break使用不当引发的一个“血案”

    最近在网上冲浪,读到一则新闻,摘抄下这则新闻: ======================= 以下文字摘抄自互联网==================== 1990年1月15日,AT&T电话 ...

  3. 求1-2/3+3/5-4/7+......49/97和(C语言实现)

    一.功能需求 求1 - 2/3 + 3/5 - 4/7 + ......49/97的和 C语言等级考试中也有涉及到类似的需求. 二.代码分析 仔细查看功能需求,可以发现这个等式的三个规律: 1.从每一 ...

  4. MMM 数位dp学习记

    数位dp学习记 by scmmm 开始日期 2019/7/17 前言 状压dp感觉很好理解(本质接近于爆搜但是又有广搜的感觉),综合了dp的高效性(至少比dfs,bfs优),又能解决普通dp难搞定的问 ...

  5. 1.Actor编写-ESGrain与ESRepGrain

    ESGrain 生命周期 Ray中ESGrain继承自Grain扩展了Grain的生命周期.Grain的生命周期参见文档附录:1-Grain生命周期-译注.md ESGrain重写了Grain的OnA ...

  6. Android调试移动端webview

    尝试了各种Mac版本的安卓模拟器,包括Android Studio.Genymotion以及国内的网易MuMu.夜神.蓝叠.腾讯手游助手,做的最好的是Android Studio,最难上手的也是And ...

  7. Excel催化剂开源第13波-VSTO开发之DataGridView控件几个小坑

    Excel催化剂内部大量使用了DataGridView,这其中有一些小坑,花了力气才解决的,在此给广大开发者作简单分享. 为何要使用DataGridView而不是其他控件如ListBox.ListVi ...

  8. [HDU4135]CO Prime(容斥)

    也许更好的阅读体验 \(\mathcal{Description}\) \(t\)组询问,每次询问\(l,r,k\),问\([l,r]\)内有多少数与\(k\)互质 \(0<l<=r< ...

  9. [virtualenvwrapper] 命令小结

    创建环境 mkvirtualenv env1 mkvirtualenv env2 环境创建之后,会自动进入该目录,并激活该环境. 切换环境 workon env1 workon env2 列出已有环境 ...

  10. [PXE] Linux(centos6)中PXE 服务器搭建,PXE安装、启动及PXE理论详解

    [PXE] Linux(centos6)中PXE 服务器搭建,PXE安装.启动及PXE理论详解 本篇blog主要讲述了[PXE] linux(centos)PXE无盘服务器搭建,安装,启动及pxe协议 ...