关于前端:前端模块打包之Webpack

这里总结一下，本人在学习 webpack 时，比拟纳闷的中央

webpack 是前端模块化打包工具，它把所有都看成模块，比方 css、js、图片文件等都能够看成模块，再通过一些 loader（加载器）和 plugin（插件）对资源进行解决，打包成合乎生产环境的前端资源。

多模块文件依赖，减少代码复用性

传统引入资源相似这种模式，没有模块化关系。

<body>
    <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="c.js"></script>
</body>

引入模块化关系

// mathUntil.js
function sum(num1, num2) {return num1 + num2;}
  function mul(num1, num2) {return num1 * num2;}
  export {
      sum,
      mul
  }

 
// main.js
// 应用
 const {
      sum,
      mul
  } = require("./js/mathUtil.js")
  console.log(sum(10, 20));
  console.log(mul(2, 4));

还能够应用 import

// 举个栗子
// a.js
export default function (a, b) {return a + b;}

// index.js
import sum from 'a.js';
// 应用
console.log(sum(1,2))// 3

打包拓展语言

个别状况下 CSS 的预处理语言 Less、Scss，以及 ES6+ 的一些语法（模块化 import、export 等）, 浏览器还不能间接运行并显示解决，所以须要 webpack 打包成合乎浏览器辨认显示的格局。
提供一些功能强大的 loader（加载器）、plugin（插件），缩小代码量或者便于我的项目保护

file-loader：把文件输入到一个文件夹中，在代码中通过绝对 URL 去援用输入的文件
url-loader：和 file-loader 相似，然而能在文件很小的状况下以 base64 的形式把文件内容注入到代码中去
source-map-loader：加载额定的 Source Map 文件，以不便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，反对模块化、压缩、文件导入等个性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 查看 JavaScript 代码

define-plugin：定义环境变量
commons-chunk-plugin：提取公共代码
uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码

明确 webpack 的构建流程之前，得先理解一下

entry 入口终点

Chunk 能够了解成多个模块合并成的代码块

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步失去的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 办法开始执行编译；
确定入口：依据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件登程，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都通过了本步骤的解决；
实现模块编译：在通过第 4 步应用 Loader 翻译完所有模块后，失去了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输入资源：依据入口和模块之间的依赖关系，组装成一个个蕴含多个模块的 Chunk，再把每个 Chunk 转换成一个独自的文件退出到输入列表，这步是能够批改输入内容的最初机会；
输入实现：在确定好输入内容后，依据配置确定输入的门路和文件名，把文件内容写入到文件系统。

关于前端:前端模块打包之Webpack

前言

1、什么是 webpack?

2、为什么须要 webpack?

3、常见的 Loader

4、常见的 Plugin

5、webpack 的构建流程