什么是Webpack（以及打包代码过程）

一.定义

        webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。

静态模块 : 指的是编写代码过程中的，html，css，is，图片等固定内容的文件.

打包:把静态模块内容，压缩，整合，转译等(前端工程化)

1. 把less/sass 转成 css 代码
2. 把 ES6+降级成 ES5
3. 支持多种模块标准语法

二.体验Webpack打包过程

1. 初始化项目 yarn init -y 或者 npm init -y
2. 安装依赖 webpack、 webpack-cli(命令行工具，有了这个就可以往终端中使用webpack命令)
3. 在项目中创建 src 目录，然后编写代码(index.js)
4. 执行 yarn webpack 来对代码进行打包(打包后观察dist目录)

在一个写好的项目的根目录终端中输入命令下载webpack

npm i webpack webpack-cli --save-dev

成功后查看目录中的package.json文件中的scripts配置项中的build配置

如果没有则自己配置上build，不过这个build是自定义名字，如果自动生成有build就不用管了，没有则写上build，值为webpack就行。

最后执行打包命令：

npm run build

成功后会在目录中生成一个dist文件里面就是打包压缩好的项目

这就是压缩文件的简单实现步骤了。

三.打包的另外配置(webpack.config.js)：

 修改webpack打包的入口和出口：

       webpack默认的入口是 ./src/index.js 文件

       webpack默认的出口是 ./dist/main.js 文件

比如我们把入口设置成一个src下的login文件夹下的index.js，出口设置成dist文件夹下的index.js操作如下：

首先找到根目录下的webpack.config.js文件，如果没有就自己新建一个名字不能随便起在里面编码：

const path =require('path');

module.exports ={
  // 模式(生产模式)   development--开发模式
  mode:"production",
  // 入口
  entry:path.resolve(__dirname,'src/login/index.js'),
  // 出口
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'my-first-webpack.bundle.js',
  },
  // 加载器配置，打一些css，less等文件
  module:{
    rules:[
        text:/\.css$/i,
        use:["style-loader","css-loader"]
     ]
  }
};

对于前端开发人员在学习过程中会这些就够用了，需要的话再自己深入文了解。

                                                        给个关注呗兄弟们！！！