webpack是基于node开发的模块打包工具,所以他本质上是由node实现的。
我们要保持node版本尽量的新,另一个要保持webpack版本尽量的新,高版本的webpack会利用新版本中的一些特性来提高他的打包速度,webpack作者也提到了,在某些复杂的打包环境下,用webpack4打包比老版本webpack3打包的快了90%以上。
安装webpack流程,进入项目根目录
npm init
之后,文件夹下会有一个文件,叫做package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
这个文件内容就是项目或node包的一些信息,这里面我们可以增加一些信息
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {},
"author": "Q",
"license": "ISC"
}
安装webpack有两种方式
1、全局安装
npm install webpack webpack-cli -g
webpack -v
如果会出现版本号就说明全局安装好了,但是这种全局安装的模式非常不推荐使用。比如,我有两个项目都用webpack打包,假如用全局安装webpack,webpack的版本号是固定的,但假设其中一个项目是webpack3进行配置的,另一个项目是webpack4进行配置的,所以全局安装webpack4,那么webpack3是跑不起来的。要想解决这个问题,得删除webpack4,安装webpack3才有作用,但假设两个项目有依赖,通过全局按照,无法满足两个项目的要求。
2、项目内安装webpack
npm install webpack webpack-cli -D (等价于npm install webpack webpack-cli --save-dev)
安装好了之后,项目会多出一个文件,叫做node_modules。
npx webpack -v
这个时候,webpack -v 拿不到版本号,这个方式会在全局里面找,npx会帮助我们在当前项目这个目录的node_modules里面找webpack。这种方式的好处,比如再新建一个demo2
npm init -y (这个时候不会再询问那些问题,默认生产)
npm info webpack (可以找到所有版本信息)
npm install webpack@4.25.0 webpack-cli -D (指定版本安装)

webpack的正确安装方式的更多相关文章

  1. 【Python】和【Jupyter notebook】的正确安装方式?

    学了那么久Python,你的Python安装方式正确吗?今天给你看看什么才是Python正确的安装方式,教程放在下面了,喜欢的记得点赞. Python安装 Python解答Q群:660193417## ...

  2. windows下nodejs正确安装方式

    ​ 下载安装包: 32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi 64 位安装包下载地址 : https://node ...

  3. CAC的Debian-8-64bit安装BBR正确打开方式

    装过三台debian 64 bit, CAC, 2欧, KVM虚拟机 做法都一样---下面说下正确安装方式   0. 有装锐速记得先删除,免得换核心后,锐速在扯后腿.   1.换4.9版kernel ...

  4. Visual Studio问题集锦:coloader80.dll未正确安装

    问题 今天在修改之前的一个项目的时候报了一个错,大概内容如下: 有一个 Visual Studio 的 DLL 文件(coloader80.dll)未正确安装.请通过"控制面板"中 ...

  5. Hive的三种安装方式(内嵌模式,本地模式远程模式)

    一.安装模式介绍:     Hive官网上介绍了Hive的3种安装方式,分别对应不同的应用场景.     1.内嵌模式(元数据保村在内嵌的derby种,允许一个会话链接,尝试多个会话链接时会报错)   ...

  6. Linux下软件包的多种安装方式

    源码包安装 在Linux下的很多软件都是通过源码包方式发布的,虽然相对于二进制软件包,配置和编译起来繁琐点,但是它的可移植性却好得多,针对不同的体系结构,软件开发者往往仅需发布同一份源码包,不同的最终 ...

  7. 以正确的方式开源 Python 项目

    以正确的方式开源 Python 项目 大多数Python开发者至少都写过一个像工具.脚本.库或框架等对其他人也有用的工具.我写这篇文章的目的是让现有Python代码的开源过程尽可能清 晰和无痛.我不是 ...

  8. 以正确的方式开源 Python 项目(转)

    大多数Python开发者至少都写过一个像工具.脚本.库或框架等对其他人也有用的工具.我写这篇文章的目的是让现有Python代码的开源过程尽可能清晰和无痛.我不是简单的指——“创建一个GitHub库,提 ...

  9. linux软件安装方式

    先插句题外话,快捷键 Ctrl+s 的功能是停止输入,Ctrl+q 恢复输入; 正题,在linux的应用软件安装有三种: 1,tar包 2,rpm包 3,dpkg包 以下介绍三种包的安装和卸载方式 1 ...

随机推荐

  1. C#把大写英文变成小写英文,把小写英文变成大写英文

    static void Main(string[] args) { string s;  // 声明一个变量,来接受用户输入的值. Console.WriteLine("请输入一个字符串:& ...

  2. spring的aop 基于schema

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程 一 前期工作 1.新建一个java项目,我是使用的maven,所以我新建了一个简单的maven项目,因为mav ...

  3. css text-shadow

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. FFT板子

    woc......FFT这玩意儿真坑...... 一上午除了打了几遍板子什么也没干......真是废了...... 你要加油啊...... #include<cstdio> #includ ...

  5. Ant design 项目打包后报错:"Menu(or Flex) is not defined"

    我的项目使用了ant-design 和 ant-design-mobile,在测试环境上没问题,但是打包发布之后控制台报错 Menu is not defined Flex is not define ...

  6. js修改日期

    需求说明: (1)首先是input显示年月日时分格式时间,其中年月日实在本地时间基础上,加上后面联动值.小时默认08:00不变 (2)后面input内显示天数,右侧加减按钮,控制天数,天数确定后,前面 ...

  7. echarts 表格与 div 之间 空白的设置

    一. options 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项 {Object} grid 二. grid 直角坐标系内绘图网格 名称 默认值 描述 {number ...

  8. 准备Activiti开发环境

    1.添加jar包 在activiti-5.13 -> wars 目录下 解压 activiti-rest.war ,导入WEB-INF\lib下所有包添加到classpath中. 由于使用的是O ...

  9. 《Visual C++ 2010入门教程》系列一:关于Visual Studio、VC和C++的那些事

    原文:http://www.cnblogs.com/Mrt-02/archive/2011/07/24/2115606.html 作者:董波 日期:2010.6.15 写在前面 在我还在上学的时候,我 ...

  10. Android中获取TextView行数

    项目中发现,如果直接通过TextView.getLineCount()方法获取行数时,总是0,研究发现,setText()后立即调用getLineCount(), 这时TextView还未完成meas ...