webpack详解

webpack是一个静态模块打包工具

打包.png

• grunt/gulp的核心是Task
  我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）
  之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
  所以grunt/gulp也被称为前端自动化任务管理工具。

• 我们来看一个gulp的task
  下面的task就是将src下面的所有js文件转成ES5的语法。
  并且最终输出到dist文件夹中。

  
  
  gulp.png

• 什么时候用grunt/gulp呢？
  如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。
  只需要进行简单的合并、压缩，就使用grunt/gulp即可。
  但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。

• 所以，grunt/gulp和webpack有什么不同呢？
  grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
  webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

webpack安装

通过node.js自带的包管理工具NPM进行安装
npm install webpack -g

准备工作

文件和文件夹解析：
dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件
main.js：项目的入口文件。具体内容查看下面详情。
mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。
index.html：浏览器打开展示的首页html
package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）

image.png

mathUtils.js文件中的代码：

mathUtils.js.png

main.js文件中的代码：

main.js.png

JS文件的打包

• 现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。
  因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。
• 另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。
• 我们应该怎么做呢？使用webpack工具，对多个js文件进行打包。
  我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。
• 另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。

• OK，如何打包呢？使用webpack的指令即可

  
  
  打包.png

使用打包后的文件

bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可

打包后的文件.png

入口和出口

入口和出口.png

局部安装webpack

因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。所以通常一个项目，都有自己局部的webpack。
第一步：
npm install webpack --save-dev
第二步：通过node_modules/.bin/webpack启动webpack打包

启动webpack打包.png

package.json中定义启动

image.png

什么是loader

• loader是webpack中一个非常核心的概念。
• webpack用来做什么呢？
  在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
  但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
  对于webpack本身的能力来说，对于这些转化是不支持的。
• 那怎么办呢？给webpack扩展对应的loader就可以啦。
• loader使用过程：
  步骤一：通过npm安装需要使用的loader
  步骤二：在webpack.config.js中的modules关键字下进行配置
  大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。

css文件处理 – css-loader style-loader

在webpack的官方中，我们可以找到如下关于样式的loader使用方法：

image.png

css-loader只负责加载css文件，但是并不负责将css具体样式嵌入到文档中。
这个时候，我们还需要一个style-loader帮助我们处理。

image.png

less文件处理 – 准备工作

image.png

image.png

图片文件处理 – 资源准备阶段

image.png

使用url-loader进行处理

image.png

图片文件处理 – file-loader

image.png

image.png

ES6语法处理

image.png

Vue组件化开发引入

image.png

image.png

认识plugin

• plugin是什么？
  plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
  webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
• loader和plugin区别
  loader主要用于转换某些类型的模块，它是一个转换器。
  plugin是插件，它是对webpack本身的扩展，是一个扩展器。
• plugin的使用过程：
  步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
  步骤二：在webpack.config.js中的plugins中配置插件。
• 下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用。

打包html的plugin

image.png

js压缩的Plugin

image.png

搭建本地服务器

image.png

根据coderwhy PPT整理