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. python爬取酷狗音乐

    url:https://www.kugou.com/yy/html/rank.html 我们随便访问一个歌曲可以看到url有个hash https://www.kugou.com/song/#hash ...

  2. Linux基本目录机构

    Linux基本目录机构 1. 基本介绍 Linux的文件系统采用级层式子的树状目录结构 最上层是根目录"/" Linux世界里,一切皆文件 2. 目录用途 /bin: 是Binar ...

  3. CountDownLatch、CyclicBarrier

    CountDownLatch CountDownLatch类位于java.util.concurrent包下,利用它可以实现类似计数器的功能.比如有一个任务A,它要等待其他4个任务执行完毕之后才能执行 ...

  4. 极简 Node.js 入门 - 4.4 可写流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  5. Java知识系统回顾整理01基础05控制流程07结束外部循环

    一.break是结束当前循环 二.结束当前循环实例 break; 只能结束当前循环 public class HelloWorld { public static void main(String[] ...

  6. 查杀进程小工具——WPF和MVVM初体验

    最近因为工作需要,研究了一下桌面应用程序.在winform.WPF.Electron等几种技术里,最终选择了WPF作为最后的选型.WPF最吸引我的地方,就是MVVM模式了.MVVM模式完全把界面和业务 ...

  7. 6-kubernetes网络

    1.service存在的意义 防止破的失联(服务发现) 定义一组pod的访问策略(提供负载均衡) 2.pod与service的关系 通过label-selector相关联 通过service实现pod ...

  8. Windows7 提示“无法访问 xxxx,您没有权限访问,请与网络管理员联系请求访问权限”的解决办法

    Windows7 客户端访问提示"无法访问 xxxx,您没有权限访问,请与网络管理员联系请求访问权限"的解决办法

  9. tomcat加载失败

    tomcat启动加载信息如下: Connected to server [2017-10-16 09:02:28,149] Artifact basic-admin:war exploded: Art ...

  10. MeteoInfoLab脚本示例:闪电位置图

    这个脚本示例读取文本格式的闪电数据,读出每条闪电记录的经纬度和强度,在地图上绘制出每个闪电的位置,并用符号和颜色区分强度正负.数据格式如下:0 2009-06-06 00:01:16.6195722 ...