標簽:必須 轉化 一個 rgb 圖片 asc 定義 而且 任務管理
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲,webpack是一個現代的JavaScript應用的靜態模塊打包工具。
我们从两个点来解释上面这句话:模块 和 打包
了目前使用前端模塊化的一些方案:AMD、 CMD、CommonJS、ES6,在ES6之前,我们要想进行模块化开发,就必須借助于其他的 工具,让我们可以进行模块化开发,并且在通过模块化开发完成了项目后,还需要处理模块间的各 种依赖,並且將其進行整合打包。而webpack其中一個核心就是让我们可能进行模块化开发,并 且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件,我们的CSS、圖片、json文件 等等在webpack中都可以被当做模块来使用(在后续我们会看 到)。 这就是webpack中模块化的概念。
什麽是打包?
理解了webpack可以幫助我們進行模塊化,并且处理模块间的各种复杂关系后,打包的概念就 非常好理解了。 就是将webpack中的各种资源模块进行打包合 并成一個或多个包(Bundle)。 并且在打包的过程中,还可以对资源进行处理, 比如压缩圖片,将scss转成css,将ES6语法转成 ES5语法,将TypeScript转成JavaScript等等操 作。 但是打包的操作似乎grunt/gulp也可以帮助我 们完成,它们有什么不同呢?
grunt/gulp的核心是Task(任务),我们可以配置一系列的task,并且定義task要处理的事务(例如ES6、ts轉化,圖片压缩,scss转成css),之后让grunt/gulp来依次执行这些task,而且让整个流程自动化,所以grunt/gulp也被称为前端自动化任務管理工具。
什麽時候用grunt/gulp呢?
如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念。 只需要进行简单的合并、压缩,就使用grunt/gulp即可。
但是如果整個項目使用了模塊化管理,而且相互依賴非常強,我們就可以使用更加強大的webpack了。
所以,grunt/gulp和webpack有什麽不同呢?
grunt/gulp更加強調的是前端流程的自動化,模塊化不是它的核心。
webpack更加強調模塊化開發管理,而文件壓縮合並、預處理等功能,是他附帶的功能。
上面都是理論,百度也可,理解即可,下面安裝這個Webpack:
安裝webpack首先需要安裝Node.js,Node.js自帶了軟件包管理工具npm。 npm 就是 Node Package Manager ,NODE包管理器。
查看自己的node版本
全局安装webpack(这里我先指定版本号3.6.0,因为vue cli2依赖该版本)
-g 的意思就是说 全局安装
局部安裝webpack(後續才需要)
--save-dev 的意思就是说 开发时依赖,项目打包后不需要继续使用的。
爲什麽全局安裝後,還需要局部安裝呢?
在終端直接執行webpack命令,使用的全局安裝的webpack
当在package.json中定義了scripts时,其中包含了webpack命令,那么使用的是局部webpack
標簽:必須 轉化 一個 rgb 圖片 asc 定義 而且 任務管理
原文地址:https://www.cnblogs.com/bi-hu/p/15072255.html