如何在项目中安装webpack,webpack-cli?

前提:电脑安装了 node和npm包管理工具

1 创建项目文件夹或者在已有的项目中打开终端  输入相关命令:

npm init

因为已经安装好了node 的 npm 包管理工具,使用npm 在项目中初始化,使得项目符合 node 规范。

根据终端提示一步一步输入后

这样项目文件夹中就会多出一个 package.json文件,一些项目的基本信息:项目名称,版本,描述和javascript脚本等。

可以添加比如下图中 "private": true, 意思是项目是私有的,不会发布到npm的线上仓库。也可以修改javascript脚本中的配置,比如原始打包命令可能是npx webpack index.js

配置 "bundle": "webpack" 打包的时候运行 npm run bundle

2 项目中打开终端  输入相关命令:

(1) 如果是全局安装,使用 npm install webpack webpack-cli -g,检测是否安装成功 使用 webpack -v /  webpack-cli -v

   但是很少有这样全局安装的,原因比如你有的项目使用的是webpack 3+的版本,而另一个项目使用的是webpack4+版本,他们互相之间是有冲突的。

当你需要打包3+项目的时候,你需要先卸载4+的webpack,然后使用3+的webpack打包。很费劲。

(2 菊部安装,不对,是局部安装,使用npm install webpack webpack-cli -dev---save (等同于 npm install webpack webpack-cli -D)

检测版本使用 npx webpack -v 。一般默认是安装最新版本的webpack 如果想安装历史版本,可以先查看一下历史版本 使用 npm info webpack 然后相应的安装。

3 项目中打开终端 输入 npm install 也可以把项目需要的依赖包都安装,运行完项目中会多处一个node_modules文件夹。

这样在项目中加安装了webpack 打包工具。

webpack学习(一)项目中安装webpack的更多相关文章

  1. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  2. webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  3. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. webpack从零开始第1课:安装webpack和webpack-dev-server

    原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...

  5. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

  6. [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (5/5)

  7. [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (4/5)

  8. [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (3/5)

    进入OEL

  9. [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (2/5)

随机推荐

  1. Celery-一个会做异步任务,定时任务的芹菜

    Celery 分布式任务队列 同步与异步 比如说你要去一个餐厅吃饭,你点完菜以后假设服务员告诉你,你点的菜,要两个小时才能做完,这个时候你可以有两个选择 一直在餐厅等着饭菜上桌 你可以回家等着,这个时 ...

  2. 【C/C++多线程编程之七】pthread信号量

    多线程编程之信号量      Pthread是 POSIX threads 的简称.是POSIX的线程标准.          相互排斥量用来处理一个共享资源的同步訪问问题,当有多个共享资源时,就须要 ...

  3. 2018-12-29-WPF-如何建立自己的-3d-gis-程序

    title author date CreateTime categories WPF 如何建立自己的 3d gis 程序 lindexi 2018-12-29 14:11:11 +0800 2018 ...

  4. Servlet小结(转载)

    http://www.iteye.com/topic/766418 1 .首先,什么是Servlet?        Servlet是一个Java编写的程序,此程序是在服务器端运行的,是按照Servl ...

  5. 【JZOJ4858】【GDOI2017模拟11.4】Walk

    题目描述 在比特镇一共有n 个街区,编号依次为1 到n,它们之间通过若干条单向道路连接. 比特镇的交通系统极具特色,除了m 条单向道路之外,每个街区还有一个编码vali,不同街区可能拥有相同的编码.如 ...

  6. 一个挺好用的自己写的小插件(用与把一般的图片转换成预制)——UNITY3D

    首先 下载一个DLL文件,名字:System.Windows.Forms. 然后把这个文件放在资源目录,位置随便. 接着上代码 : using System.IO; using UnityEditor ...

  7. Directx11教程(42) 纹理映射(12)-简单的bump mapping

    原文:Directx11教程(42) 纹理映射(12)-简单的bump mapping        有时候,我们只有一个粗糙的模型,但是我们想渲染纹理细节,比如一个砖墙,我们如何在只有一个平面的时候 ...

  8. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章:立方体贴图

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章:立方体贴图 代码工程地址: https://github.c ...

  9. 关于 SSD 的接口和相关名词(2019-09-10)

    关于 SSD 的接口和相关名词 了解了很多天的 SSD,太多的名词. 先记录一下. SATA MSATA M2 NVME NGFF U2 TODO: 后续收集相关信息.

  10. 从 Program Manager 看 Leader 是什么角色

    http://blog.csdn.net/uxyheaven/article/details/50396951 从 Program Manager 看 Leader 是什么角色 转载请注明出处http ...