继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

WEBPACK4 基础入门(一)

loserwang
关注TA
已关注
手记 10
粉丝 2
获赞 11

前端的学习和工作总是离不开webpack, 不少初次接触webpack的萌新(包括我)对各种依赖的安装和配置,依赖的新旧更替,可谓是谈虎色变,总是被搅得晕头烂额,故有人戏称“如何称为webpack高级工程师”。所以我希望能够总结一下一些webpack的基本用法 ,供自己和他人参考。

什么是webpack?

官网的定义如下:

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

在使用webpack时 , 你项目中的每一个js文件、css文件、less文件、图片等都是一个module ,这些module之间彼此引用 ,错综复杂 ,而webpack可以建立这些module之间的依赖图,产生一个或者多个bundles,实现多个文件之间共享一个文件,减少资源浪费。 除此之外,代码运行还依赖一定的工具(即依赖,如解析代码的工具,再比如服务器等等),webpack可以配置如何使用并且何时使用这些依赖的相关信息。

依赖

讲到webpack的使用 ,首先从依赖开始讲起。

依赖,我所理解的是,项目运行所要依赖的环境和工具。代码写完之后是不可能的自动执行的,正如java运行需要java虚拟机,C语言需要相应的解释器,我们的前端项目运行也需要相应的工具去支持。比如要解析css,我们需要装css-loader;将ES6语法的js解析成低版本的js,我们需要安装babel-loader和babel-core等;在前端运行,我们可以安装webpack-dev-server去建立本地服务器;再比如,我们的主角,webpack ,模块是不可能自动把自己打包的,我们需要安装webpack依赖。

安装依赖,可以使用nvm,我们来试一试

首先在你空空的项目文件夹在命令行输入 npm init 将项目初始化

输入name 、version 、description 、 test command、 keyword: webpack music lisence: MIT
​ is this OK? yes

然后我们就得到一个项目目录,里面有一个package.json,打开看看里面是什么?是不是很眼熟,里面就是我们刚才输入的name、version等内容。其实。package.json就是用来记录我们项目相关的信息,当我们安装好依赖后,也会被记录在其中。

接着继续安装 ,我们可以选择本地安装(或者局部安装),也可以选择全局安装。

  • 局部安装 : npm install --save-dev xxxx (安装devDependencies) npm install --save xxxx (安装dependence)
    devDependencies一般是项目运行所需的工具, 而dependence一般是引入外部的一些库函数,如jquery 、react。

    局部安装之后,项目目录下会出现一个node_module文件夹,我们可以在里面找到我们的依赖文件

    在我们的node_modules/.bin目录下有了babel.cmd、webpack,cmd等cmd文件 ,cmd文件可以直接在命令行里运行(也就是我们在命令行内输入 webpack时,其实就是启动这个webpack.cmd脚本文件将文件打包)

  • 全局安装:npm install xxx 全局安装类似,只不过不把文件安在我们的项目下 ,而是安装在别的地方(即安装nvm和node时建立的一个node_modules文件,可自己看看nvm安装过程)

    局部安装和全局安装 :其实局部安装和全局安装所安装的文件是相同的文件 ,但是在全局安装过程中 配置了环境变量(或路径?记不清叫什么名字了),你的计算机已经知道它在哪了, 以webpack为例 ,我们只需在命令行中输入 :webpack 就可以调用全局安装的webpack了 ,但是却不能这样直接调用局部安装的webpack, 我们需要告诉计算机它在哪 ,比如此时我切换到我的项目目录test下 ,我需要输入 node_modules/.bin/webpack才能调用

    由于我们安装的依赖文件都很大 ,所以node_modules文件也容量也特别大,这样上传和下载代码就会很麻烦 ,所以我们上传代码时可以不上传node_modules文件夹 。既然package.json记录了我们下载了哪些依赖,我们下载别人代码时,只要有package.json文件 ,根据里面的内容安装配置 ,可以使用npm install 或者 npm install –save-dev 直接安装到局部或者全局

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP

热门评论

厚着脸皮给自己一个赞

查看全部评论