1、全局安装

安装 webpack 前要确保已经下载 node.js 最新版本node.js官网地址

目前使用命令行安装的 webpack 默认为最新版本(以下我使用了全局安装。官网建议本地安装,这可以使我们在引入破坏式变更(breaking change)的依赖时,更容易分别升级项目。)

npm i webpack -g

当我想确认是否安装成功,输入 webpack -v 后出现:

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https//github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

提示我们必须安装一个 CLI,有两个版本,Windows 安装 webpack-cli ,Mac 安装 webpack-command,输入以下命令:

npm i webpack-cli -g//当前安装时的版本为3.0.8

然后再输入 webpack -v 确认是否安装成功:

webpack -v
4.16.0

至此,webpack4 才算安装完成(注意:如果 webpack 安装在全局,那么 CLI 也需要装在全局)。

webpack4以及以上版本的全局安装,直接执行以下命令:

npm install webpack webpack-cli –g

webpack的全局安装和局部

安装webpack,首先需要安装node,因为webpack依赖node环境,node自带了包管理工具npm;

查看node的版本号:

npm -v

全局安装webpack,这里安装3.6.0,主要使用vue cli2,-g表示全局安装;

npm i webpack@3.6.0 -g

局部安装使用:--save-dev是开发时依赖;

cd 项目目录

npm  i webpack@3.6.0  --save-dev
												

webpack4的安装使用的更多相关文章

  1. webpack4.0安装及使用(一)

    前言  1.什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建 ...

  2. webpack4从安装到使用入过的那些坑

    1.全局安装 安装 webpack 前要确保已经下载 node.js 最新版本(node.js官网地址) 目前使用命令行安装的 webpack 默认为最新版本(以下我使用了全局安装.官网建议本地安装, ...

  3. webpack4.0在Mac下的安装配置及踩到的坑

    一.什么是webpack是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.它做的事情是,分析你的项目结构,找到JavaScript模块以 ...

  4. webpack的正确安装方式

    webpack是基于node开发的模块打包工具,所以他本质上是由node实现的. 我们要保持node版本尽量的新,另一个要保持webpack版本尽量的新,高版本的webpack会利用新版本中的一些特性 ...

  5. 10分钟学会前端工程化(webpack4.0)

    一.概要 1.1.前端工程化 随着前端的不断发展与壮大,前端变得越来越复杂,组件化.模块化.工程化.自动化成了前端发展中不可或缺的一部分,具体到前端工程化,面临的问题是如何提高编码->测试-&g ...

  6. webpack4前端工程化教程(一)

    -本文作为webpack小白入门文章,会详细地介绍webpack的用途.具体的安装步骤.注意事项.一些基本的配置项,并且会以一个具体的项目实例来介绍如何使用webpack.另外,本文会简单地介绍一些最 ...

  7. webpack4.0.1安装问题和webpack.config.js的配置变化

    The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webp ...

  8. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  9. webpack4.0.1安装问题及解决方法

    2月底的时候,webpack4正式发布了,但是当我们安装之后,使用下面的语句来打包的时候,发现打包失败了 webpack ./src/main.js ./dist/bundle.js 并且给出了下面这 ...

随机推荐

  1. 有关java反射的几个小方法的作用和区别

    1.Class类中 getXXX()和getDeclaredXXX()的作用和区别: 前者获取某个类的所有公共(public)的字段(or方法or构造函数),包括父类.后者获取所有的字段(or方法or ...

  2. Android如何使用注解进行代码检查

    原文首发于微信公众号:躬行之(jzman-blog),欢迎关注交流! Android Studio 内置了代码检查工具 Lint,可在菜单栏选择 Analyze > Inspect Code 执 ...

  3. gRPC-Protocol基础知识-C#篇

    本文使用协议缓冲区语言的proto3版本,为C#程序员提供了使用协议缓冲区的基本介绍. 通过创建一个简单的示例应用程序,展示了如何 在.proto文件中定义消息格式. 使用协议缓冲区编译器. 使用C# ...

  4. 如何修改MySQL数据库名称

    比如数据库名称old_db想改名为new_db MySQL修改数据库名称比较麻烦,不支持直接修改,需要通过其它方式间接达到修改数据库名称的目的. 在 MySQL 5.1.23 之前的旧版本中,我们可以 ...

  5. Spring一些笔记

    @ControllerAdvice ,被注解的class表示这是一个增强的 Controller. 使用这个 Controller ,可以实现三个方面的功能: 全局异常处理 全局数据绑定 全局数据预处 ...

  6. 从零搭建Golang开发环境--go修仙序章

    1. 什么是go语言 Go(又称 Golang)是 Google 的 Robert Griesemer,Rob Pike 及 Ken Thompson 开发的一种静态 .强类型.编译型语言 .Go 语 ...

  7. Web Storage API的介绍和使用

    目录 简介 浏览器的本地存储技术 Web Storage相关接口 浏览器兼容性 隐身模式 使用Web Storage API 总结 简介 Web Storage为浏览器提供了方便的key value存 ...

  8. 【题解】[SDOI2015]星际战争

    \(\color{red}{Link}\) \(\text{Solution:}\) 观察到,如果一个时间\(T\)可以完成任务,则\(T+1\)这个时间也可以完成任务. 于是我们可以二分. 为了避免 ...

  9. 我要告诉你:java接口中可以定义private私有方法

    在传统的Java编程中,被广为人知的一个知识点是:java Interface接口中不能定义private私有方法.只允许我们定义public访问权限的方法.抽象方法或静态方法.但是从Java 9 开 ...

  10. auto_send_tablespace.sh

    简述:周期定时发送表空间到指定邮箱内 1.修改邮箱配置 /etc/mail.rc,具体细节见网上教程 $ vi /etc/mail.rc set from=123456@qq.comset smtp= ...