一、webpack是什么？

        webpack是一个现代js应用程序的静态模块打包器；

     功能：分析项目结构，找到js模块及其他一些浏览器不能直接运行的拓展与语言（sass，TypeScript），并将他们打包为合适的格式以供浏览器使用。

    构建： 将源代码转换成发布到线上可执行的js，css，html代码。 构建的过程包含：

    代码转换过程： 将TypeScript编译成JavaScript，less/sass编译成css等。

    文件优化功能： 能够压缩JavaScript/css/html代码，也能压缩图片，合并图片

    代码分割: 能够提取多个页面中公共代码，提取首页不需要执行部分的代码，让其异步执行。

    模块合并： 在采用模块化的项目中会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。

    自动刷新： 监听本地源代码的改变，自动重新构建刷新浏览器。

    代码校验： 在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

      自动发布： 更新完代码后，自动构建出上线发布代码并传输给发布系统。

  总结：构建其实是工程化，自动化思想在前端开发中体现，把一系列流程交给代码去实现。让代码自动化执行这一系列复杂的流程。

二.webpack 安装及打包

2.打包练习:

 2.1 在桌面上创建一个工程 cd 进入文件夹 

 2.2 初始化工程: npm init -y 

 2.3 在CMD中输入: 局部安装webpack npm install --save-dev webpack 

 安装cli npm install --save-dev webpack-cli 

 以上两步相当于指令： npm install webpack webpack-cli --save-dev

2. 4.创建webpack的配置文件 webpack.config.js entry:

打包入口文件 output:打包输出文件

2.5css打包依赖的模块

js中引入

三.使用npm加载需要的模块

例子:加载使用jQuery 

安装npm install jquery

 npm install jquery@版本号 

如何使用jQuery模块 

在index.js首页引入jquery

//var $=require("jquery");

 卸载:npm uninstall jquery

四.图片和字体打包

引入图片   import fruit from "../img/2.png";

                    var img = new Image();

                    img.src=fruit;