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. [WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画

    1. 前言 这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容. 我不建议初学者做太多动画的工作,但合适的动画可以引导用户视线,提升用户体 ...

  2. Python 爬虫:豆瓣电影Top250,包括电影导演、类型、年份、主演

    结果输出到文本文件中. import codecs import requests from bs4 import BeautifulSoup headers={'User-Agent': 'Mozi ...

  3. 通过代数,数字,欧几里得平面和分形讨论JavaScript中的函数式编程

    本文是对函数式编程范式的系列文章从而拉开了与以下延续一个. 介绍 在JavaScript中,函数只是对象.因此,可以构造函数,作为参数传递,从函数返回或分配给变量.因此,JavaScript具有一流的 ...

  4. fjnu2016-2017 低程 PROBLEM C 汪老司机

    动态规划 方程 #include <iostream>#include <iomanip>#include <cmath>#include <algorith ...

  5. [leetcode]95 Unique Binary Search Trees II (Medium)

    原题 字母题添加链接描述 一开始完全没有思路.. 百度看了别人的思路,对于这种递归构造的题目还是不熟,得多做做了. 这个题目难在构造出来.一般构造树都需要递归. 从1–n中任意选择一个数当做根节点,所 ...

  6. rabbitMQ_Publish/Subscribe(三)

    发布/订阅 生产者发布信息,多个订阅者可以同时接收到信息. 转发器 现在是时候在RabbitMQ中引入完整的消息传递模式了. 让我们快速了解我们在以前的教程中介绍的内容: 生产者是一个发送消息的应用程 ...

  7. 入门webpack,看这篇就够了

    什么是webpack? 官网给出的概念是:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递 ...

  8. PyQt4 在Windows下安装

    快来加入群[python爬虫交流群](群号570070796),发现精彩内容.     首先在网上下载sip文件下载完之后解压, 在Windows的开始菜单栏中进入sip的解压目录下:   在目录下面 ...

  9. 关于报错:The Microsoft.ACE. Oledb.12.0 provider was not registered on the local computer

    错误描述:The Microsoft.ACE. Oledb.12.0 provider was not registered on the local computer 最近在Web项目中做一个自动生 ...

  10. .net持续集成测试篇之Nunit文件断言、字符串断言及集合断言

    使用前面讲过的方法基本上能够完成工作中的大部分任务了,然而有些功能实现起来还是比较麻烦的,比如说字符串相等性比较不区分大小写,字符串是否匹配某一正则规则,集合中的每一个(某一个)元素是否符合特定规则等 ...