如何在项目中安装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. Ajax中post方法400和404的问题

    1.从400变成404 我相信有很多人都用过Ajax技术来获取数据,一般都是使用get来获取的,但是敏感信息就不能继续用get了,于是就换成了post,但是用post的时候有时候发生一些奇怪的事情,比 ...

  2. python Match函数

  3. [java]反射1 2017-06-25 21:50 79人阅读 评论(10) 收藏

    很多东西的实现基础,都是反射,spring的AOP,动态代理等等,下面咱们来学习一下Java的反射 什么是反射? JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于 ...

  4. This Product is covered by one or more of the folloWing patents

    借用一下网络图片,作为描述: 原因: 启动方式使用了网络启动, 解决方案: 进入bios,修改启动方式,禁用网卡驱动,使用从硬盘启动或者从U盘启动即可.

  5. php-imagick扩展

    介绍 magick 是用 ImageMagic API 来创建和修改图像的PHP官方扩展.ImageMagick® 是用来创建,编辑,合并位图图像的一套组件. 它能够用于读取,转换,写入多种不同格式的 ...

  6. nginx与apache

    参考链接:https://www.cnblogs.com/changning0822/p/7844004.html

  7. USACO93网络流入门Drainage Ditches 排水渠(DCOJ 5130)

    题目描述 (传送门:http://poj.org/problem?id=1273翻译 by sxy(AFO的蒟蒻)) 每次约翰的农场下雨,Bessie的水池里的四叶草就会被弄破.这就意味着,这些四叶草 ...

  8. 装了ubuntu之后,只能进入ubuntu系统,不能进入windows系统

    电脑之前安装的是Windows 7系统, 后来在安装Linux系统中(快要完成)出现了故障, 没办法只能关机,之后重启,重启后只能进入Linux系统了 解决方案: 使用sudo update-grub ...

  9. 洛谷P4126 [AHOI2009]最小割

    题目:洛谷P4126 [AHOI2009]最小割 思路: 结论题 在残余网络上跑tarjan求出所有SCC,记id[u]为点u所在SCC的编号.显然有id[s]!=id[t](否则s到t有通路,能继续 ...

  10. [Java]ssh网上商城总结 标签: hibernatessh 2016-05-15 21:03 1099人阅读 评论(32)

    前几日敲完了ssh网上商城,虽然现在已经敲完了整个系统,却发现自己对于ssh,了解的一点都不多,什么是struts2,什么是spring,什么是hibernate,自己都是稀里糊涂,然后看了一下后面的 ...