Webpack 静态模块打包器介绍

2020-03-12 0 By admin

本质上,webpack 是一个现代 JavaScript 应用程序的【静态模块打包器】(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念:

1、入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

2、输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。

3、loader

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

4、插件(plugins)

loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

一、使用webpack 过程

  1. 使用命令打包,定义入口和输出信息。
  2. 为webpack创建webpack.config.js配置文件,将入口和输出信息写在配置文件中。
  3. 使用npm init 创建package.json 文件,为工程创建NPM配置文件。
  4. 将工程描述信息,工程依赖的模块和工程脚本命令等信息写在package.json文件中。
  5. 之后就可以使用npm命令进行打包,如果有新模块的话,使用npm install 安装新模块。
  6. 在webpack配置文件中设置使用的loader,多个loader结合使用的话,loader使用顺序是从右向左。

1.1、前端模块化开发

目前使用前端模块化开发的一些方案:AMD、CMD、CommonJS、ES6。
在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具;并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。webpack处理的不仅仅是JavaScript文件,CSS、图片、json文件等在webpack中都可以被当做模块来使用。

1.2、什么是打包操作

打包操作将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。

二、webpack 安装

安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm。

2.1、全局安装webpack

npm config set registry https://registry.npm.taobao.org
npm install webpack@3.6.0 -g

这里指定版本号3.6.0,因为vue cli2依赖该版本。全局安装的话,可以在终端直接使用。

2.2、局部安装webpack开发时依赖

npm install webpack --save-dev
开发时依赖,项目打包后不需要继续使用的。
局部安装时,当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack。

三、常用的loader和plugins

3.1、CSS 文件处理

style-loader 将CSS样式应用到DOM中。
css-loader css的加载器,可以在JS文件中使用 import/require 加载CSS文件。

3.2、图片文件处理

小图片使用 url-loader 进行处理
将小图片转为base64类型显示;并且通过设置limit 属性,设定小于多少的图片使用此loader处理。
大图片使用 file-loader 进行处理
大图片会进行移动和重命名;可以通过img,name,hash,ext等属性进行详细设置。

3.3、将ES6转为ES5的语句

使用 babel-loader 将ES6转为ES5的语句。

3.4、常用插件

  1. 添加版权信息的插件 BannerPlugin
  2. 打包html文件的插件 HtmlWebpackPlugin
  3. js文件压缩的插件 uglifyjs-webpack-plugin

四、搭建本地服务器

webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
不过它是一个单独的模块,在webpack中使用之前需要先安装。
devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:

  1. contentBase:为哪一个文件夹提供本地服务,默认是根文件夹
  2. port:端口号
  3. inline:页面实时刷新
  4. historyApiFallback:在SPA页面中,依赖HTML5的history模式
  5. 另外在webpack配置scripts 时加上--open可以直接打开浏览器