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. 安装Windows10操作系统 - 初学者系列 - 学习者系列文章

    今天无事,就将安装操作系统的几种方式进行了总结( https://www.cnblogs.com/lzhdim/p/13719725.html ).这篇博文主要是对安装windows10操作系统的过程 ...

  2. JVM学习(七)JMM内存模型

    一.什么是JMM 概念:Java内存模型(Java Memory Model ,JMM)就是一种符合内存模型规范的,屏蔽了各种硬件和操作系统的访问差异的,保证了Java程序在各种平台下对内存的访问都能 ...

  3. Java多线程--原子性、可见性、有序性

    计算机的内存模型: 计算机在运行行程序的时候,指令由CPU执行,计算机上数据存放在物理内存当中,CPU在执行指令的时候免不了要和数据打交道.刚开始,还相安无事的,但是随着CPU技术的发展,CPU的执行 ...

  4. Android作业 0923

    计算器小应用 package com.example.myhomework2; import androidx.appcompat.app.AppCompatActivity; import andr ...

  5. Kubernetes K8S之存储Secret详解

    K8S之存储Secret概述与类型说明,并详解常用Secret示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS7.7 ...

  6. JS中的DOM对象

    DOM对象 1. DOM树 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),通过 HTML DOM对象,可访问 JavaScript HTML 文档的所有 ...

  7. Spring 配置文件配置事务

    一.引入事务的头文件 xmlns:tx="http://www.springframework.org/schema/tx" http://www.springframework. ...

  8. Python面向对象基础变量

    In [1]: class A: ...: NAME = 'A' # 类的直接下级作用域 叫做类变量 ...: def init(self, name): ...: self.name = name ...

  9. .Net Core 2.2 存取Cookie

    第一步(注释代码):注释Startup.cs中 ConfigureServices 函数中的  options.CheckConsentNeeded = context => true; 第二步 ...

  10. 【小白学PyTorch】21 Keras的API详解(上)卷积、激活、初始化、正则

    [新闻]:机器学习炼丹术的粉丝的人工智能交流群已经建立,目前有目标检测.医学图像.时间序列等多个目标为技术学习的分群和水群唠嗑答疑解惑的总群,欢迎大家加炼丹兄为好友,加入炼丹协会.微信:cyx6450 ...