如何在项目中安装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. vue-cli3 搭建的前端项目基础模板

    基于 vue-cli3 搭建的前端模板,fork 或 clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork 特性 CSS 预编译语言:less Ajax: ax ...

  2. Leetcode704.Binary Search二分查找

    给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target  ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1. 示例 1: 输入: num ...

  3. php_imagick是怎么实现复古效果的呢?

    php_imagick程序示例 1.创建一个缩略图并显示出来 <?phpheader('Content-type: image/jpeg');$image = new Imagick('imag ...

  4. 【JZOJ3854】【NOIP2014八校联考第2场第2试9.28】分组(group)

    MEi Bsny所在的精灵社区有n个居民,每个居民有一定的地位和年龄,ri表示第i个人的地位,ai表示第i个人的年龄. 最近社区里要举行活动,要求几个人分成一个小组,小组中必须要有一个队长,要成为队长 ...

  5. MYSQL中LIMIT用法_后台分页

    LIMIT是MySQL内置函数,其作用是用于限制查询结果的条数. 1)其语法格式如下: LIMIT[位置偏移量,]行数 其中,中括号里面的参数是可选参数,位置偏移量是指MySQL查询分析器要从哪一行开 ...

  6. shell学习(22)- comm

    1.预备知识 comm命令可用于比较两个已排序的文件.它可以显示出第一个文件和第二个文件所独有的行以及这两个文件所共有的行.该命令有一些选项可以禁止显示指定的列,以便于执行交集和求差操作. 交集(in ...

  7. laravel 操作日志;

    在网上寻找了许多方法,觉得有的地方看不懂,  决定自己写一些关于laravel中调用本身中的操作日志: Laravel 日志工具在强大的 Monolog 函数库上提供一层简单的功能.Laravel 默 ...

  8. 从零学React Native之14 网络请求

    通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 ...

  9. ActiveX控件的消息处理函数

    首先切换到类视图 然后鼠标单击选中类(如果你要给ClockCtrl类添加事件,你就选中ClockCtrl类) PS:顺便多说一句,如果不用这种方法,而是手动添加,即使你的代码跟MFC添加的一模一样,那 ...

  10. HDU-1114_Piggy-Bank

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem ...