cnpm安装webpack_Webpack（一）介绍

一、Webpack是什么、为什么要使用它

简单来说，Webpack是一个打包工具。

站在2018年的角度，成为一个优秀的前端工程师，除了要会写页面样式和动态效果之外，还需要会用主流的单页面框架、Node.js、简单的前端的性能优化等等。加上现在一部分服务器的逻辑移到了前端上，所以实际上前端的复杂度也是提升了很多。

而Webpack可以帮助我们完成一些任务。比如js压缩、css压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack功能很强大，能帮我们完成的工作远远不止这些。

下面，让我们慢慢了解Webpack吧~

二、安装

① Webpack的运行需要依赖Node.js，因此需要先安装Node.js。

中文网下载地址：下载 | Node.js 中文网

安装完成之后在命令行窗口输入下面两行命令，若有出现版本号则安装成功。

② 接着就可以通过npm（一个基于Node.js的包管理工具）来安装Webpack咯~

首先，通过下面的一行命令先生成package.json

$ npm init

③ 接着就能通过npm完成webpack的安装啦

因为npm的源在国外，所以安装速度可能比较慢。建议大家可以用淘宝的npm镜像。但是要注意的一点是，淘宝npm镜像中有一些包会不太一样（一般来说不影响使用）

淘宝 NPM 官网：淘宝 NPM 镜像

通过下面这行代码即可完成cnpm的配置

通过下面两行代码即可完成webpack的安装

// 要是不想使用淘宝的npm镜像，就用npm代替cnpm
$ cnpm install -D webpack
$ cnpm install -D webpack-cli

④ 安装完之后在package.json同级目录新建一个webpack.config.js文件。然后再在package.json中增加一个“scripts”配置项。

//

接着在命令行中输入下面的这行代码就可以启动webpack啦。

$ npm run build

但是，因为我们的webpack.config.js是空的，因此运行时会报错。具体配置会在下一节课开始讲。

三、一些必要的解释

到这里为止，大家可能会有几个问题。

Q1：命令行窗口怎么打开？

A1：windows系统在左下角的搜索框输入cmd即可

Q2：package.json中的scripts有什么用？

A2：如上面的实例，当我们输入“npm run build”就相当于是通过npm脚本执行了“webpack --config webpack.config.js”。

那为什么我们不直接在命令行中输入后面的那行代码呢？因为上面的实例代码中，webpack是局部安装的，因此在环境变量中不能找到webpack，直接输入那行代码会提示找不到webpack。

那为什么npm的script就能运行呢？我们通过npm安装的包都会放在node_modules的目录中，而这个目录中有一个叫.bin的子目录，在这个目录中放置有webpack的可执行文件。npm的script默认会去.bin中寻找，因此能够运行。

这个问题也能通过全局安装解决，-g表示全局安装。

$ cnpm install -g webpack
$ cnpm install -g webpack-cli

Q3：为什么推荐使用局部安装？

A3：我们写完的代码可能会给其他人用，而我们不能保证其他人也全局安装了webpack，因此局部安装webpack比较保险。

cnpm安装webpack_Webpack（一）介绍相关推荐

dva学习-入门安装和目录介绍
一.dva安装和介绍下面的npm其实可以用淘宝镜像cnpm安装更快,安装命令npm install -g cnpm --registry=https://registry.npm.taobao.or ...
npm淘宝镜像cnpm安装使用（最新版），cnpm临时单次/永久使用
前言 npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便,可能会出现无法访问,发生异常,或者下载缓慢等问题.为 ...
SQL Server 2016 AlwaysOn 安装及配置介绍
SQL Server 2016 AlwaysOn 安装及配置介绍 Always On 可用性组功能是一个提供替代数据库镜像的企业级方案的高可用性和灾难恢复解决方案. SQL Server 2012 ...
【学习笔记】Tableau安装与界面介绍
Tableau安装与界面介绍一.Tableau下载与安装网址:https://www.tableau.com 首页进去就可以看到这么一堆吹牛逼的大话,糟了,是那种心动的感觉.但我们大可不必当真,直 ...
[Python爬虫] scrapy爬虫系列一.安装及入门介绍
前面介绍了很多Selenium基于自动测试的Python爬虫程序,主要利用它的xpath语句,通过分析网页DOM树结构进行爬取内容,同时可以结合Phantomjs模拟浏览器进行鼠标或键盘操作.但是,更 ...
Centos 6.4下MySQL安装及配置介绍
我们前面文章有介绍到的功能主要用于近期公司的环境架构建设,所以今天得文章也主要是为了公司的环境搭建的测试:继续废话一些,由于公司的站点服务器分别部署在中国和美国(两台),中国及美国的相关用户会不定时的 ...
cnpm安装webpack_快速打造最强 Webpack 前端工具链
当前,前端技术日新月异,公司的团队技术栈和业务场景不同,都会建立自己的前端工程体系.一个好的工程体系能够保证团队的研发流程规范,提高团队的研发效率,能够减少人员流动带来的项目交接和维护成本.2-3个项 ...
cnpm安装失败及解决方案
1.首先要去配置node.js,直接去node.js官网(http://nodejs.cn/) 下载node-vx.x.x.pkg文件双击一路默认安装即可,安装完在终端输入: node -v 如果显示 ...
如何更换安装鸿蒙系统,华为鸿蒙系统2.0如何进行安装？鸿蒙系统2.0安装方法详细介绍...
华为鸿蒙系统2.0如何进行安装?现在已经可以安装鸿蒙系统2.0,但是你不清楚安装,下面就让浏览器小编为大家带来,鸿蒙系统2.0安装方法详细介绍. 部分更新了华为鸿蒙OS用户表示,安卓和鸿蒙的应用软件都 ...

cnpm安装webpack_Webpack（一）介绍

cnpm安装webpack_Webpack（一）介绍相关推荐

最新文章

热门文章