什么是webpack

最新推荐文章于 2022-08-23 20:56:29 发布

原创最新推荐文章于 2022-08-23 20:56:29 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

10 篇文章

订阅专栏

什么是webpack

- - - 1.什么是webpack
    - 2.webpack五个核心概念

1.什么是webpack

webpack是一种前端资源构建工具

先来看以下代码：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpackStudy</title>
    <link rel="stylesheet" href="./webpack_01.less">
</head>
<body>
    <h1>webpack</h1>
    <script src="./webpack_01.js"></script>
</body>
</html>
```
webpack_01.less
```
body,
  html {
  background-color: #990001;
}
```
webpack_01.js
```
import $ from 'jquery';

$(function () {
  $('h1').click = () => {
    console.log(1111);
  }
})
```
最终结果：less文件并没有给html添加样式，js文件的引入导致在浏览器中出现：webpack_01.js:1 Uncaught SyntaxError: Cannot use import statement outside a module错误，而出现以上情况的主要是原因是：浏览器并不识别less文件，而由于import语法是es6新增的模块引入，而浏览器并不能识别，导致这一系列的错误。因此如果想要浏览器识别并成功显示出来，则需要一个工具将.less转换成.css，将.js中不可识别的语法转换成.js中可识别的语法，由于引入这些新技术主要在于便于开发，但是新技术务必会导致浏览器不一定支持的问题，则需要工具转换成浏览器可识别的技术，但是当新技术增多，每个新技术都对应一个转换工具，显然这很麻烦，因此webpack开始起作用，将这些转换工具的功能进行集成，只需要学会webpack的使用，就可以转换任意的技术，而这一个过程称为构建过程，所以webpack是一种前端资源构建工具。
webpack是一个静态模块打包器(module bundler)

查看以下代码：
```
// index.js
// 引入js资源
import $ from 'jquery';
// 引入样式文件
import './webpack_01.less';
// 引入...

$(function () {
  $('h1').click = () => {
    console.log(1111);
  }
})
```
一个文件中存在引入许多资源的情况，同时这些资源可能又存在对其他资源的依赖。这些资源需要交给构建工具(wepack)去处理，处理的过程：

首先先指定一个入口文件（打包起点），以上述代码为例：index.js文件，webpack以该文件作为起点开始打包，记录当前文件的依赖关系形成一个依赖关系树状结构图，再根据结构图的先后顺序依次把相应的资源（代码）引入，引入之后形成一个代码块，叫做chunk块，接着再对这个chunk块进行各项处理，比如：less编译成css，js文件编译成可识别的js语法，而这个处理统称为打包，打包之后输出文件叫做bundle，而这个输出的文件bundle则可以在浏览器中无障碍看到效果了。

webpack_01

总结：在webpack看来，前端的所有资源(js/json/css/img/less/sass…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)

2.webpack五个核心概念

Entry

指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图

Output

指示webpack打包后的资源bundles输出到哪里去，以及如何命名

Loader

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

可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

Mode

指示webpack使用相应模式的配置

选项	默认配置	特点
development	会将process.env.NODE_ENV的值设为developme。启动NamedChunksPlugin和NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagincludedChunksPlugin,ModuleConcateationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifyJsPlugin。	能让代码优化上线运行的环境

总体过程：通过entry指定的入口文件作为起点开始打包操作，首先分析出依赖关系图，再根据依赖关系图进行构建chunk代码块，将chunk代码块进行打包，遇到js文件则通过webpack直接打包操作，遇到非js文件，则通过loader翻译成webpack理解的语言，再进行打包。对于压缩等复杂功能则通过Plugins进行辅助打包，最后形成的bundle文件根据Output指定的路径以及名称进行输出。