webpack依赖于node,为了可以正靠运行,必须依赖node环境.node环境为了可以真正的执行很多代码,必须其中包含各种依赖的包npm工县(node packages manager)所以在进行webpack安装之前,首先要安装node运行环境。

关于node的安装请参照博客的以下页面
https://www.cnblogs.com/singledogpro/p/11722561.html [node.js安装和配置(windows系统)]
https://www.cnblogs.com/singledogpro/p/11722672.html [node.js运行配置(vs code非控制台输出)]

webpack的安装
请确保安装了Node.js的最新版本。而且已经在您的项目根目录下已经初始化好了最基本的 package.json文件。

在终端运行的命令都是全局运行,所以不建议全局安装webpack,使用全局会导致项目混乱,因为每个项目创建时的打包工具不一样。选择本地安装包管理,即将运行指令配置到package.json的script属性中。
但是在没有配置webpack.config.js之前,如果想在终端使用【webpack】命令,就需要全局安装。一开始安装的webpack最好低于4.0版本

没有全局安装webpack,且没有配置webpack.config.js

关于webpack版本及打包的事情

【webpack安装低于4版本(没有配置webpack.config.js)】
https://www.cnblogs.com/singledogpro/p/12018896.html

webpack安装大于4.x版本(没有配置webpack.config.js)
https://www.cnblogs.com/singledogpro/p/12018900.html

所以推荐的开发环境是webpack@3.6.0

//低于4版本的安装指令
npm i webpack@3.6.0 -D //高于4版本的安装指令
npm i webpack -D
npm i webpack-cli -D

npm install packagename --save 或 -S
--save、-S参数意思是把模块的版本信息保存到dependencies(生产环境依赖)中,即你的package.json文件的dependencies字段中;

npm install packagename --save-dev 或 -D
--save-dev 、 -D参数意思是吧模块版本信息保存到devDependencies(开发环境依赖)中,即你的package.json文件的devDependencies字段中;

webpack的安装和运行的更多相关文章

  1. webpack的安装和使用

    Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...

  2. Bug记载1之webpack本地安装

    当我安装前端打包工具webpack时,cmd命令出现了这么一句关键性的提示: npm ERR ! Refusing to install package as a dendency of itself ...

  3. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  4. webpack 介绍 & 安装 & 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  5. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  6. webpack局部安装的问题

    webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...

  7. webpack的安装个配置

    webpack在node下运行,首先先安装node 安装在全局:npm install webpack -g 在任何目录都可以运行 安装在局部:npm init -y npm install webp ...

  8. 【前端_React】Node.js和webpack的安装

    第一步——安装Node.js 首先要安装Node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件.Node.js的下载地址 可以自定义安装到指定的路径下,待安装完成后命令行 ...

  9. Vue之webpack的安装与配置及其简单应用

    一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. jQuery jsonp跨域请求详解

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

  2. WPF中的Stretch属性

    有时候我们在WPF程序中设置了图片的Width和Height,但图片显示出来的宽和高并不是我们预期的效果,这实际上是由于Image的默认Stretch属性导致的 Image的Stretch属性默认为U ...

  3. Hibernate 最简单实例

    我从网上下载了 hibernate-release-4.3.0.Final.zip,解压缩,把/lib/required文件夹下的所有jar包加入到eclipse项目中的Referenced Libr ...

  4. Linux系统Tomcat进程使用shutdown无法关闭进程

    问题场景: 若在应用中启动了用户线程,在Linux系统Tomcat进程使用shutdown无法关闭进程. 解决方案: #1.在catalina.sh文件中添加CATALINA_PID [root@lo ...

  5. AT&T推出云5G网络开源工具Airship

    导读 AT&T新推出的云5G网络依赖于一个名为“Airship”的开源供应工具,该工具在周一发布了第一个版本. AT&T负责网络云的副总裁Amy Wheelus告诉LightReadi ...

  6. Wide&Deep 模型学习教程

    WDL 学习教程 推荐系统+WDL 教学视频: https://www.bilibili.com/video/av29905315/ WDL 模型介绍: https://blog.csdn.net/g ...

  7. python的并发模块concurrent

    Python3.2开始,标准库为我们提供了concurrent.futures模块,它提供了ThreadPoolExecutor和ProcessPoolExecutor两个类,实现了对threadin ...

  8. OOP三大核心封装继承多态

    OOP支柱 3 个核心:封装 继承 多态 封装就是将实现细节隐藏起来,也起到了数据保护的作用. 继承就是基于已有类来创建新类可以继承基类的核心功能. 在继承中 另外一种代码重用是:包含/委托,这种重用 ...

  9. windows CMD常用基础命令

    一.ping 主要是测试本机TCP/IP协议配置正确性与当前网络现状. ping命令的基本使用格式是: ping IP地址/主机名/域名 [-t] [-a] [-n count] [-l size] ...

  10. share point 已在此服务器场中安装 ID 为 15/b7a69889-1789-4855-b8bd-9a3b4cfd7fc0 的功能。请使用强制属性显式地重新安装此功能。

    部署步骤“添加解决方案”中出现错误: 已在此服务器场中安装 ID 为 15/b7a69889-1789-4855-b8bd-9a3b4cfd7fc0 的功能.请使用强制属性显式地重新安装此功能. 英文 ...