2021-01-28

WebPack

一、概述

官网：https://webpack.js.org

中文网：https://www.webpackjs.com

1、webpack是什么？

webpack是一种前端资源构建（打包）工具，一个静态模块打包器。在webpack看来，前端的所有资源文件（js/json/css/image/less/sass...）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。webpack可以解决当前web开发中所面临的困境，webpack提供了：

友好的模块化支持

代码压缩混淆

处理js兼容问题images

性能优化

目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。

示例：使用==模块化开发思想==创建一个隔行换色的效果

先初始化一个空项目npm init -y

• 这是第1个li标签
• 这是第2个li标签
• 这是第3个li标签
• 这是第4个li标签
• 这是第5个li标签
• 这是第6个li标签
• 这是第7个li标签

​

// 先需要安装jQuery，npm i -S jquery

import$from"jquery";

​

$(function() {

$("li:odd").css("backgroundColor","blue");

$("li:even").css("backgroundColor","green");

});

在浏览器中执行的时候会报错，需要注意，代码是没有问题的，问题是浏览器不兼容。

2、webpack的五个核心概念

entry入口

本项目应该使用哪个模块来作为构建其内部依赖图的开始（指定打包入口文件）。打包入口文件默认为src/index.js

output输出

在哪里输出它所创建的 bundles，以及如何命名这些文件，打包输出文件默认值为dist/main.js

loader

loader让webpack能够去处理那些非js文件（webpack自身只理解js）

plugins

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

mode 模式

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

二、webpack的使用

1、基本的安装与配置

webpack是运行在node环境中的，需要Node>= 8.10和npm>=5.6的版本支持。在项目中安装webpack的方式如下：

[email protected] [email protected]

# 由于目前这个2个工具大版本号已经升级，并且不兼容后续使用的工具，所以这边使用指定的低版本号

安装好后可以通过先前提及过的npx命令来检查webpack的版本以确定是否安装成功：

npx webpack--version

确认能够通过上述命令输出webpack的版本信息后，再在package.json文件中的scripts节点配置webpack运行脚本命令（指令名称自行决定）：

此时，我们可以在终端中运行自定义命令npm run compact来对项目使用webpack打包，例如打包之前写的隔行换色代码：

npmrun compact

打包完毕后会在当前项目目录下产生dist目录，里面会包含一个main.js文件，修改src/index.html文件，将原先的JavaScript文件引入修改为打包好的文件：

最终效果如下（说明先前写的代码已经生效）：

2、webpack的配置文件

2.1、基本配置

我们在第一节的概述中提及了webpack的五个核心概念，这五个核心概念都属于webpack的配置，因此，如果需要更好的运用webpack，我们需要掌握其配置文件的相关知识点。

配置的方式有两种：单配置文件形式、多配置文件形式。

首先来看单配置文件方式：在项目根目录下面创建一个webpack.config.js文件，webpack运行的环境为nodejs环境，所以此文件中的模块化规范为commonjs规范写法。该配置文件创建好后会被webpack在打包时自动使用（因此，文件名不能写错）。

constpath=require("path");

​

module.exports={

// 打包模式  development |  production

mode:"development",

// 项目入口

entry:"./src/index.js",

// 项目出口

output: {

path:path.resolve(__dirname,"dist"),

// [name]默认的名称为main（如果需要分目录，可以在名字前加文件夹名字）

filename:"js/[name].js",

   },

};

另一种配置方式是：在项目根目录中创建一个config目录（为了便于后期管理，提前预设两套或多套webpack配置），专门用于存放webpack的相关配置文件：

由于这两个文件不似/webpack.config.js文件会被webpack自动使用，因此需要在package.json文件中进行分别引入指定：

这样一来，后续如果需要将项目打包成开发环境需要的代码则执行命令：

npmrun compact:dev

如果需要将项目打包成生产环境需要的代码则执行命令：

npmrun compact:pro

2.2、配置自动打包

通过上一节，我们已经可以使用打包工具去将写好的代码进行打包了，但是在操作的过程中大家可能会发现有一个比较麻烦的地方：修改一次代码就得重新打包一次，这种感觉有点类似于之前的node xxx.js一样，那么在webpack这里是否有类似于nodemon那么好用的自动化工具能帮助我们自动检测文件的变化并自动执行呢？答案是有的，它就是webpack-dev-server自动化打包工具。

webpack-dev-server的安装指令如下：

[email protected]

安装好后同样也需要在package.json中配置自定义执行的指令：

随后即可通过自定义指令来运行自动打包服务：

# 该命令执行完后命令行会如同执行`nodemon`一样处于实时检测的状态

npmrun compact

启动打包服务后，即可通过浏览器访问http://127.0.0.1:8080来浏览自动打包好的项目。

注意点

上述过程中，会自动产生并运行一个临时性的服务器供我们预览，访问地址是：http://127.0.0.1:8080

上述过程中，打包生成的输出文件会托管在项目根下，但文件是虚拟的，是无法看见的，也就是说该操作并不会产生前面所谓的dist目录，如果需要得到打包好的目录，还是得运行之前的打包命令

此外，webpack-dev-server自动打包操作还支持添加一些常见的配置选项：

--open：打包完毕后自动运行浏览器

--host：配置打包服务器访问的地址

--port：配置打包服务器访问的端口

相关参数需要加在package.json文件中针对自定义打包命令的定义处，如：

"scripts": {

"compact":"webpack-dev-server --open --host 127.0.0.1 --port 8888"

}

2.3、配置默认预览页

在访问2.2小节中的http://127.0.0.1:8080时还需要点击一下页面中的src才能预览页面效果，比较麻烦。这个操作可以通过配置进行进一步简化。

首先需要安装一个扩展模块，安装命令如下：

npmi-Dhtml-webpack-plugin

然后修改webpack的配置文件（此时需要注意你使用的是哪种配置文件方式，单一or多个，并做对应的修改），增加以下配置项：

constHtmlWebpackPlugin=require("html-webpack-plugin");

​

exportdefaults{

// ....

plugins: [

newHtmlWebpackPlugin({

template:"./src/index.html",

title:"jQuery的隔行变色"

       }),

   ],

}

上述的title配置项的作用有点模版引擎变量替换的意思，这个值可以在模板中通过特定的标记输出：

需要注意，修改webpack配置文件并不会触发自动打包服务，如果需要使新配置生效，需要结束当前自动打包服务重新运行自动打包命令。

使用该款插件后，会自动在视图中去帮我们引入打包好的文件main.js：

3、加载器

3.1、加载器概述

在实际开发中，webpack只能打包处理以.js为后缀的模块，其他非.js后缀的模块webpack默认处理不了，而需要调用loader加载器才能正常打包，否则会报错！

loader加载器可以协助webpack打包处理特定的文件模块了，例如：

less-loader可以打包处理.less相关的文件

sass-loader可以打包处理.scss相关的文件

...

3.2、打包处理css文件

正如前面所说，webpack默认不能打包css文件，如果在没有安装css加载器的时候打包包含css文件的项目则会报错：

根据报错提示，我们需要安装一个合适的加载器才能继续。

所以要想打包css文件，则需要安装css加载器，该加载器的安装命令为：

npmi-Dstyle-loader css-loader

安装好需要的加载器后需要对webpack进行配置，告诉webpack当遇到css后缀的文件应该交由哪个加载器去处理。在webpack打包命令对应的module的rules数组中添加css-loader规则：

module: {

rules: [{test:/\.css$/,use: ["style-loader","css-loader"] }],

},

在写加载器use的时候，需要注意：

use数组中指定的加载器顺序是固定的

多个加载器调用的顺序是：从后往前、从下往上调用（倒序执行）

在配置好对应的css加载器后，webpack才能打包对应的css文件（提醒：配置好之后需要重新启动自动打包服务让配置文件生效）。

3.3、打包处理less文件

要想通过webpack打包less文件，同样需要安装对应的加载器：

npmi-Dless-loader less

安装好后也需要在对应的webpack配置文件中配置针对less文件打包的规则：

module: {

rules: [

{test:/\.less$/,use: ["style-loader","css-loader","less-loader"]}

   ]

}

3.4、打包处理scss文件

同上，打包scss文件也是需要进行对应加载器安装与配置的。

首先需要安装对应的加载器：

npmi-Dsass-loader node-sass

安装好之后再在webpack的配置文件中配置打包规则：

module: {

rules: [

{test:/\.scss$/,use: ["style-loader","css-loader","sass-loader"]}

   ]

}

3.5、配置自动添加css兼容前缀

针对部分样式可能需要特定前缀才能被对应的浏览器所支持，这种情况下也需要安装对应的加载器webpack才能帮组我们解决兼容问题。

安装对应加载器：

npmi-Dpostcss-loader autoprefixer

随后在项目根目录下创建postcss的配置文件postcss.config.js并初始化配置：

constautoprefixer=require("autoprefixer")

module.exports={

plugins: [autoprefixer]

}

最后在webpack配置文件中加入针对前缀兼容的打包规则：

module: {

rules: [

{test:/\.css$/,use: ["style-loader","css-loader","postcss-loader"]}

   ]

}

在IE浏览器下，打包产生的代码可能无法运行看到效果，如果在IE浏览器下运行出现SCRIPT5009: “Promise”未定义的报错，请先安装babel-polyfill，安装命令如下：

npmi-Dbabel-polyfill

安装好babel-polyfill后，需要修改webpack的打包入口配置为：

entry: ["babel-polyfill","./src/index.js"],

3.6、打包处理图片和字体

如果在样式表中使用了图片或外部字体文件，则也需要配置对应的加载器才能进行正确的打包操作。加载器的安装命令如下：

npmi-Durl-loader file-loader

安装好后也需要在webpack配置文件中进行对应的规则配置：

module: {

rules: [

       {

test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,

use:"url-loader?limit=16940"

       }

   ]

}

需要注意，其中?之后的是loader的参数项，limit参数用于指定图片的大小，单位为字节，只有小于等于limit指定的大小，资源才会被转化。

如果图片被转化成了base64编码的形式进行显示的话，回头通过打包得到的dist目录中就没有对应的图片文件，如果没有被转成base64编码形式则打包好的目录中会有对应的图片。

3.7、处理js文件中的高级语法

webpack在不需要引入任何loader不可以对于js进行打包处理，但是它不会对于js兼容性进行任务的处理，而我们编写的项目是需要在不同的浏览器中运行的，此时就需要对于js的兼容性在打包过程中进行对应的处理。我们可以使用babel来完成对应的js兼容处理。

首先先需要去安装babel转换器相关的包：

npmi-Dbabel-loader @babel/core @babel/runtime

再去安装babel语法插件相关的包：

npmi-D@babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties

然后再去在项目根目录下创建babel配置文件babel.config.js并初始化：

module.exports={

presets: ["@babel/preset-env"],

plugins: ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]

}

最后再在webpack的配置文件中设置打包规则：

module: {

rules: [

       {

test:/\.js$/,

use:"babel-loader",

exclude:/node_modules/

       }

   ]

}

配置完毕后，webpack即支持打包处理js中的高级语法。

常见的加载器就介绍到这里，如果后续其他文件加载器的需求，请百度解决！