webpack-第01节:认识WebPack的作用

原文网址:http://jspang.com/2017/09/16/webpack3-2/

如果您已经在前端行业中,WebPack在业界的流行程度自然必备多说,成为了前端小白升级为前端工程师的必备技能。如果你对webpack还不够熟悉,那你在前端前进的脚步会受到阻碍,但是你幸运的搜索到了这篇文章。(但是文章可能不会讲解如何从1.0、2.0版本升级3.0版本的知识,而是直接讲解3.0的知识,所以你可能需要有一个空杯心态来学习)

在学习过程中,我希望你能每节看完文章后,都可以自己亲手做一做,如果你不作就不会出现错误,不出现错误,你就没办法增长经验,那你就什么都学不会。相信我,慢慢来,比较快。

前端为什么需要WebPack?

现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决SCSS,Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

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

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

从此可以看出,无论你前端走那条线,你都要有很强的Webpack知识,才能祝你成为这个框架领域的大牛。

什么是WebPack?

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

这段话有三个重点:

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

我们可以从下图再次了解一下WebPack的作用:

安装WebPack

看了这么久,一定着急动手作一作了。要使用WebPack就要先进行安装,就和你要使用微信,必须在手机上下载微信的APP一样,但是不同的是WebPack的安装,采用的是命令行npm形式的安装。

这里我以windows系统为例,给大家做截图示范。苹果安装稍有不同,不过大同小异(如果有问题,可以直接进群交流,进群方法看文章开头)。

具体安装方法:

用win+R打开运行对话框,输入cmd进入命令行模式。然后找到你想开始项目的地方,输入下方代码:

1

2

mkdir webpack_demo

cd webpack_demo

第一句是建立一个文件夹,第二句是进入这个文件夹。这个文件夹就是我们的项目文件目录了,文件夹建立好后,可以通过下面命令安装WebPack。

需要注意的是,你在执行下一步时必须安装node,可以通过 node -v来查看node安装情况和版本,如果没有安装,要先安装node才可以继续进行。

1

2

//全局安装

npm install -g webpack

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

  • 检查你node的版本号,如果版本号过低,升级为最新版本。
  • 网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习http://npm.taobao.org/
  • 权限问题,在Liux、Mac安装是需要权限,如果你是Windows系统,主要要使用以管理员方式安装。请在命令前加sudo  即可

注意:全局安装是可以的,但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。

对项目目录进行安装

全局安装完成后,我们还要进行一个项目目录的安装。在用npm安装前,我们先要进行一下初始化,初始化的主要目的是生成package.json文件(这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等,如果你对此文件还不了解,可以看看node 的相关知识)。

在命令行输入:

1

npm init

输入完成后,npm终端会问你关于项目的名称,描述……一堆内容,如果你不考虑发布到npm上,这些内容都不重要,而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。

输入下面命令进行项目目录的安装:

1

npm install --save-dev webpack

这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用。

开发环境and生产环境:

  • 开发环境:在开发时需要的环境,这里指在开发时需要依赖的包。
  • 生产环境:程序开发完成,开始运行后的环境,这里指要使项目运行,所需要的依赖包。

查看webpack版本

你安装好后,会想知道你现在webpack版本,在工作中交流时,也会经常问到你,你的打包版本是什么?这时候我们可以用下面的命令进行查看。

1

webpack -v

可以看到我现在的版本的3.6.0版本,这是目前(2017/9/16)最新的版本了。出现了版本号,也说明你的webpack安装成功了。

看到这里,我们第一节的内容就完成了,我建议你停一下,把webpack安装到你的电脑上,再进行向下观看,如果在安装时遇到什么问题,可以在下方的留言区给我留

原文地址:https://www.cnblogs.com/jinsuo/p/8351698.html

时间: 2024-10-10 14:45:17

webpack-第01节:认识WebPack的作用的相关文章

webpack入门01

1,创建项目目录: 创建项目目录为:webpack_demo 2,npm初始化: 在项目目录中初始化npm:npm init 初始化将在项目目录中生成package.json文件 3,安装webpack: 通过npm安装webpack:npm install webpack --save-dev 安装成功后webpack会在node_modules中 4,webpack测试(单个JS文件): 在项目目录创建hello.js文件 将hello.js打包成hello.bundle.js:webpac

webpack入门(四)——webpack loader 和plugin

什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffeeScript或者JSX. loaders 特点: 1. 可以链式拼接.他们用在通向文件的管道,最后一个loader预期返回一个javascript,其它Loader可以返回任意格式给下一个loader. 2. loaders可以是同步的,也可以是异步的. 3. loaders是用node.js来跑,

关于webpack的cannot find module 'webpack/lib/node/NodeTemplatePlugin'报错问题

近期公司的项目正在研究使用webpack及vue的使用,遇到了一个问题的报错,上边是报错,说找不到这个文件下的一个模块,但是我去这个文件夹下面找了这个文件是确实存在的,所以各种寻找解决方案,最终发现在全局安装完以后,在你的本地项目上面在安装一个本地的webpack就可以了,下边是我在本地重新安装的.最后成功运行了. 关于webpack的cannot find module 'webpack/lib/node/NodeTemplatePlugin'报错问题

webpack渐入佳境系列一:webpack环境配置与打包基础【附带各种 "坑" 与解决方案!持续更新中...】

首先介绍传统模块化开发的主流方案: 1.基与CMD的sea.js,玉伯提出的解决方案,据说原来京东团队在使用.用时才定义,就近加载.最近在浏览seajs官方文档时发现seajs的域名已经在转卖,惊恐万分之余又想起了那句话,国内团队开发的技术,不是十全九美的最好不要用.国内高强度的生活节奏与压力使得日常维护变得很吃力.(想到这里,不禁为vue捏了一把汗,不过还好vue的前景非常光明!). 2.基于AMD的require.js,之前在用.提前声明与定义.国外团队维护. 3.基于commonJS的we

webpack安装填坑('webpack' 不是内部或外部命令,也不是可运行的程序或批处理文件)

差不多每次安装软件都是一个波折的过程,这次webpack的安装也不例外,安装成功之后立马来记录解决错误的方法,以备不时之需 前提条件 webpack是依赖于node安装的,所以在安装前要确保自己是否安装了node.js,在命令行运行node -v如果情况如下就是安装了node.js,如果没有安装请参考node.js的安装步骤 注意:记得在安装的node目录下创建两个文件夹然后,配置npm路径 配置全局路径:npm config set prefix "d:\nodejs\node_global&

[Webpack 2] Polyfill Promises for Webpack 2

If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has support for the ES6 Promise API. This means that if you are required to support an old browser, you need to provide a polyfill. Polyfilling is relatively t

webpack入门(一)——webpack 介绍

如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript. 2. 现代浏览器提供更广泛的接口. 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面.(SPA) 因此有很多代码在客户端! 一个体量庞大的代码库需要好好组织.模块系统提供代码库划分成模块的选项. 模块系统风格 目前有多个标准定义依赖和输出: 1. script标签(不要模块系统) 2. CommonJS 3. AMD和它的一些变种 4. ES 6 5. 其它 script 标签的样式 下面这种就是不用模块系统

[Webpack 2] Tree shaking with Webpack 2

The less code you can send to the browser, the better. The concept of tree shaking basically says that if you’re not using some piece of code, then exclude it from the final bundle, even when that piece of code is exported from a module. Because ES6

webpack入门(三)webpack的api

终于到了webpack api这一篇,我都等不及了0.0; webpack is fed a configuration object. Depending on your usage of webpack there are two ways to pass this configuration object: webpack提供一个配置对象,取决于你咋用webpack,这有两种办法pass这个配置对象. CLI If you use the CLI it will read a file w

webpack学习(五)—webpack+react+es6

如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)- webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都会用到这个组合:webpack+react+es6 还是以一个项目举例,项目中的package.json是生成的,"devDependencies"都是自己安装加入,如果拷贝网上的资料,可以npm install直接生成.而为了一探react的具体开发流程,还是自己一个个安装比较好. 项目