怎样安装webpack

现在最流行的三个前端框架,可以说和webpack已经紧密相连,框架官方都推出了和自身框架依赖的webpack构建工具。

    React.js+WebPack
    Vue.js+WebPack
    AngluarJS+WebPack

从此可以看出,无论你前端走那条线,你都要有很强的Webpack知识

webpack有3大特性:

    打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
    转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
    优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任

可以从下图了解webpack的作用

安装方法:
1、用win+R打开运行对话框,输入cmd进入命令行模式。然后找到你想开始项目的地方,输入下方代码
mkdir webpack_demo //创建一个webpack_demo文件夹
cd webpack_demo //进入该文件夹
2、查看是否看装node
输入node -v 查看是否安装并了解其版本
3、安装node完成后,方可进行安装 webpack
npm install -g webpack //全局安装 webpack

4、如果你这时安装失败了(出现了报错信息),一般有三种可能:

        1、检查你node的版本号,如果版本号过低,升级为最新版本。
        2、网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习http://npm.taobao.org/。
        3、权限问题,在Liux、Mac安装是需要权限,如果你是Windows系统,主要要使用以管理员方式安装。
5、对项目目录进行安装
    在用npm安装前,我们先要进行一下初始化,初始化的主要目的是生成package.json文件(这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等,如果你对此文件还不了解,可以看看node 的相关知识)。
在命令行输入    : npm init
完成后会生成package.json文件

输入该命令进行项目目录的安装:npm install --save-dev webpack
这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用

6、查看webpack版本

    webpack -v
    出现版本号说明安装成功

7、如果自己的版本比较旧,想要更新版本
第一步:打开Visual Studio Code软件    在 package.json 里面找到 webpack 版本号,在里面该成你想要的版本号或者最新版本号
第二步:删除里面的 node_moules文件夹
第三步:在终端里面输入npm install    就会生成你想要的webpack版本

    这是我从jspang网站上学习写下的笔记,为了自己记忆,也为了帮助有需要的朋友,希望可以帮助你,谢谢阅读

    这是计数胖的网址,讲了很多前端知识,可以了解下:http://jspang.com/

原文地址:https://www.cnblogs.com/wuyougougou970301/p/9265180.html

时间: 2024-10-04 18:43:00

怎样安装webpack的相关文章

node 安装 webpack

首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js. 用 npm 安装 Webpack: $ npm install webpack -g 此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 试试. 通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack. # 进入项目目录 # 确定已经有 package.json

如何使用npm安装webpack

逛逛ReactJS, Angular2,vuejs的社区,大牛博客,知乎的时候看到的最多的可能就会有webpack,WebPack这个构建工具已经在社区中得到了广泛的认可,而Webpack已经成了React.js开发的标配,所以,我们有必要学习一下Webpack. 所以我在网上看了大量前辈的blog,闲暇之余总结了一些使用的方法,由于技术有限可能会有些不足希望多多指教. 首先webpack是什么,使用webpack是为了解决什么样的编程问题,官网上有这个问题的图例   https://webpa

安装webpack

第一步,要安装node.js http://nodejs.cn/ 第二步,进入你要安装webpack的盘(文件),在文件路径栏里输入cmd,可以直接打开cmd,进入当前栏目 第三部,安装webpack cnpm install -g webpack 安装完成

安装webpack命令环境

1.通过cnpm安装webpack命令环境,如图 2.安装完后查看webpack的版本,如图

安装 webpack

安装 webpack看好webpack 对自动压缩和文件名自动md5更名,可解决客户端缓存问题.我的安装环境为 centos linux,root用户 1.安装Node及NPM.到NodeJS官网安装包,安装即可 安装编译的依赖(可能你的服务器上已经有了就略过)yum install gcc-c++ make 下载nodejs v6.* 版本curl --silent --location https://rpm.nodesource.com/setup_6.x | bash - 安装nodej

安装webpack后,执行webpack -v命令时报错:SyntaxError: Block-sc

安装webpack后,执行webpack -v命令时报错如下: [[email protected] ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib/node_modules/webpack/bin/webpack.js:3 let webpackCliInstalled = false; ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not

npm安装webpack失败(mac和window都可能会遇到这样的情况,以下问题主要以mac为例)

 问题描述:我想查看一下webpack的版本,于是输入了命令webpack -v, 结果如下图所示: 注:这里提示我们要安装webpack-cli,是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli包 解决方法: sudo npm uninstall webpack -g (卸载webpack) sudo npm install webpack -g (全局安装webpack) sudo npm install webpack-

安装webpack常见错误之一

我安装webpack时,出现如下错误: C:\Users\admin> npm install webpack -gnpm WARN checkPermissions Missing write access to C:\Users\admin\AppData\Roaming\npm\node_modules\webpack\node_modules\fseventsnpm ERR! path C:\Users\admin\AppData\Roaming\npm\node_modules\web

windows 使用npm安装webpack 4.0以及配置问题的解决办法

输入cmd点击打开 输入node -v 出现nodejs版本号 输入npm -v 出现npm版本号则安装npm安装成功, 2.安装webpack 桌面新建一个webpack-test文件夹,点击进入文件webpack-test夹 按下shift+鼠标右键  点击在此处打开命令窗口 输入npm init 一直点击回车键 当出现Is this ok?时 输入yes,然后点击回车键 进入webpack-test文件夹,出现package.json文件 使用notepad++打开package.json