这是我参与「第四届青训营 」笔记创作活动的第2天，今天的笔记内容主要是关于Webpack的知识点总结。

一.相关知识概括

0.为什么要学习Webpack
1. 什么是Webpack
2. Webpack打包流程
3. Loader组件 

二.知识点详细介绍

0. 为什么要学习Webpack
    1.这是前端进阶路上的必要知识点
    2.在一个团队中必须要有几个人熟悉Webpack的知识点，如果你熟悉Webpack的知识，你大概率就是这个团队的核心任务了。
    
1. 什么是Webpack
    1.前端存在许多的资源，比如：图片(png,jpg,svg等)，代码(css,html,js,ts,Vue等)......
 我们需要去管理这些资源

• 而Webpack 就是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

2. Webpack打包流程
    1. 首先介绍几个重要的概念
        - Entry 入口(Entry)，即指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
        -  Output 输出(Output)，即指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。 
        -  Loader，其让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript) 。
        -  Plugins，插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。
    2.流程
        - 第一步：初始化 package.json -- npm init。
        - 第二步：下载并安装 webpack --npm install webpack webpack-cli -g。
        - 第三步：开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development/production打包入口及输出位置 打包环境配置。

3. Loader组件 
    1. 为什么需要Loader？
        -因为Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
    2. 使用
        - 通过npm安装需要使用的loader ：
        `npm i css-loader -D` 。
        
        -在webpack.config.js中的modules关键字进行配置`。
        rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, } ]`
        
        -一些资源转换会用到多个loader配置,这时要注意loader的书写顺序,loader按照从右到左。
    3.特性
        -loader 支持链式传递,链中的每个 loader 会将转换应用在已处理过的资源上
        -loader 也可以内联显示指定
        -loader 从右到左地取值(evaluate)/执行(execute)
        

`