认识Webpack(一)

edison
170 阅读3分钟

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

为什要使用WebPack

如今前端的项目使用了各种各样的库，如lodash,jQuery这种，它们拥有着复杂的JavaScript代码和一大堆依赖包。同时我们还需要使用前端框架来编译我们绘制页面以及交互功能的代码，同时为了加快开发速度以及开发体验可能还需要处理一些css,less，以及scss这种预处理语言。这样我们的前端代码会变的臃肿而复杂。为了简化开发的复杂度，前端社区涌现出了很多比较好的实践方法：

首先是将我们的代码模块化，让我们可以把复杂的程序细化为小的文件; 后来出现未来解决javaScript的弱类型，开发了TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack可以看做是模块打包工具：它首先分析你的项目结构，遍历找到所有的JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言如Scss，TypeScript，并将其转换和打包为合适的格式供浏览器使用。

Grunt和Gulp

gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作，而grunt作为一个前端构建工具，有资源压缩，代码检查，文件合并等功能。Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，之后可以自动替你完成这些任务。

常见的静态资源

  1. .js .jsx .coffee .ts(typescript)
  2. css
  3. images
  4. 字体文件
  5. 模板文件

这些静态文件是我们经常需要引用的，但是浏览器解析渲染时，如果静态资源太多，会加载变慢。还有许多依赖关系也会影响。 解决问题就是：

  • 合并，压缩
  • 图片的 base64 编码
  • 使用 requireJS,也可用 webpack 解决依赖关系
  • Gulp 是基于 task 的解决方案
  • webpack 是基于项目的解决方案

初次使用 webpack

html 的隔行变色 首先是构建一个项目目录：

  • dist （webpack 打包后的文件目录）
  • src （html,css,js 文件）
  • node_modules（npm 引入的库文件）
  • package.json （npm init）
首先是安装webpack
npm install webpack -g

接着建立 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=/, initial-scale=1.0" />
    <title>Document</title>
    <!--下面的script标签是在webpack打包之后引入的文件-->
    <script src="../dist/main.js"></script>
  </head>
  <body>
    <ul>
      <li>我是一个标签</li>
      <li>我是一个标签</li>
      <li>我是一个标签</li>
      <li>我是一个标签</li>
    </ul>
  </body>
</html>

src>main.js

import $ from 'jquery'
$(function () {
  $('li:odd').css('backgroundColor', 'lightblue')
  $('li:even').css('backgroundColor', 'lightyellow')
})

先在 dist 目录下创建 main.js 文件 接着在项目目录下面执行webpack ./src/main.js ./dist/main.js 就会生成 main.js 文件，运行～，成功！这样一个简单的webpack打包过程就完成了！当然webpack的功能不止于此，webpack还有许多扩展的功能，一样放在下一文章介绍。

avatar
文章
阅读
粉丝