webpack学习(一)项目中安装webpack
如何在项目中安装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的更多相关文章
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- webpack从零开始第1课:安装webpack和webpack-dev-server
原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...
- 在React旧项目中安装并使用TypeScript的实践
前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...
- [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (5/5)
- [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (4/5)
- [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (3/5)
进入OEL
- [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (2/5)
随机推荐
- WatchKit编程指南:概览--Watch应用的体系结构
Apple Watch应用程序包含两个部分:Watch应用和WatchKit应用扩展.Watch应用驻留在用户的Apple Watch中,只含有故事板和资源文件,要注意它并不包含任何代码.而Watch ...
- LintCode刷题笔记-- Update Bits
标签: 位运算 描述: Given two 32-bit numbers, N and M, and two bit positions, i and j. Write a method to set ...
- SPSS统计基础-均值功能的使用
SPSS统计基础-均值功能的使用 均值过程计算一个或多个自变量类别中因变量的子组均值和相关的单变量统计.您也可以获得单因素方差分析.eta 和线性相关检验. 统计量.合计.个案数.均值.中位数.组内中 ...
- 【JZOJ4919】【NOIP2017提高组模拟12.10】神炎皇
题目描述 神炎皇乌利亚很喜欢数对,他想找到神奇的数对. 对于一个整数对(a,b),若满足a+b<=n且a+b是ab的因子,则成为神奇的数对.请问这样的数对共有多少呢? 数据范围 对于100%的数 ...
- 【OI】拓扑排序
拓扑排序 首先要求图为DAG 算法:首先将度为1的节点加入队列每次取出队首点u,在图中删去和u相邻的边继续将度数为1的点加入队列 到了最后, 如果没有度数为1的点,则图不是DAG 通过拓扑排序可以给D ...
- SQL执行计划Cost与性能之间的的关系
关于执行计划Cost的三个疑问: 1. 执行计划的Cost越低,SQL就一定跑得越快吗?或者说Cost 和 执行时间成比例关系吗? 2. Oracle 默认产生的执行计划是Cost最低的吗? 3. 如 ...
- JS BOM 窗口中的使用
1,弹框的种类 2,打开一个新页面 子窗口操作父窗口,打开新窗口显示内容open("opener.html","haha","width=300,he ...
- 序列化类型为“System.Data.Entity.DynamicProxies..."对象时检测到循环引用
这是因为EF外键引起的序列化问题. 解决方案: context.Configuration.ProxyCreationEnabled = false; 这里我用的是一个基类控制器用于被继承 返回EF实 ...
- Python学习之路5☞文件处理
一.文件处理流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 正趣果上果 Interesting fruit fruit 词:郭婞 曲:陈粒 编曲/混音/和声:燕池 萧: ...
- Linus 本尊也来了!为什么 KubeCon 越来越火了?
2015年11月,第一届 KubeCon 在美国旧金山开始的时候,还只是个200人的小会议,2019年的7月,KubeCon 第二次在中国举办,就有 3500 多位云原生和开源领域工程师齐聚一堂. 连 ...