初识webpack

• 前端发展史

  • 早期阶段

    早期前端只负责写静态页面，纯粹的展现功能，js也就是简单的作一些表单的验证，特效渲染等

  • 现阶段的Web

    前端能够管理数据以及和用户互动。因为用户交互、数据交互的需求增多，也就出现了jQuery这样的前端工具,再到目前的三大框架Vue、React、Angular，开发方式也冲原来的js的ES5语法到ES六、七、八、九、10，到Type Script，包括编写CSS的预处理器less、scss等

• webpack究竟是干什么的

  冲上文的发展史知道现阶段的Web开发涌现了许多新的开发方式，好比：ES5语法到ES六、七、八、九、10，到Type Script，包括编写CSS的预处理器less、scss等，可是浏览器并不能识别less、sass、scss等语言，为了兼容浏览器能识别开发者写出的代码就须要将浏览器不能识别的代码转换成浏览器可否识别的代码，webpack做用就在此，因此 webpack就是一个打包工具，它会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。这里附上一个 webpack官网的图片，从这张图片能够形象的说明 webpack的做用

• webpack官方文档

  • 官方文档：webpack.js.org/
  • 中文文档：webpack.docschina.org/
  • 文档目录说明：
    • API:，提供相关的接口，能够自定义编译的过程（好比自定义loader和Plugin能够参考该位置的API）
    • CONCEPTS:概念，主要是介绍一些webpack的核心概念，好比入口、出口、Loaders、Plugins等等，可是这里并无一些对它们解析的详细API；
    • CONFIGURATION:配置，webpack详细的配置选项，均可以在这里查询到，更多的时候是做为查询手册；
    • LOADERS:loaders，webpack的核心之一，常见的loader均可以在这里查询到用法，好比css-loader、babel-loader、less- loader等等；
    • PLUGINS:plugins，webpack的核心之一，常见的plugin均可以在这里查询到用法，好比BannerPlugin、 CleanWebpackPlugin、MiniCssExtractPlugin等等；

• webpack的依赖

  Webpack的运行是依赖Node环境的，因此咱们电脑上必须有Node环境

• webpack的安装

  webpack的安装须要安装两个东西，一个是webpack、还一个是 webpack-cli 二者之间的关系是：

  • 执行 webpack命令，会执行node_modules下的.bin目录下的webpack
  • 可是若是没有安装webpack-cli执行webpack命令会报错
  • webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；

  (使用第三方脚手架生成的项目是没有安装webpack-cli的，他是利用相似本身的vue-service-cli的东西) webpack命令打包流程以下：

• webpack的默认打包

  默认状况下 webpack打包是将 src文件夹下的 index.js文件做为入口的，因此当前目录没有 src文件夹或者 src文件夹下面没有一个 index.js文件的话会直接报错。而后从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的全部模块（好比.js文件、css文件、图片、 字体等），而后遍历图结构，打包一个个模块（根据文件的不一样使用不一样的loader来解析）； 打包成功后会默认在跟目下下生成一个 dist文件夹生成一个 main.js文件，此时将 main.js文件引入到 index.html后那些经过浏览器不能识别的语法书写的代码就能正常执行了好比写一个简单的减价法运算经过 commonJS的方案引入到 index.js示例代码以下 运行结果：

  1. 没有打包以前（直接引入index.js） 会报错，应为浏览器不识别 commonjs中的 require函数
  2. 打包以后（引入打包以后的js） 发现能正常运行。

  此时能够看一下打包后生成的 main.js文件 发现文件中的代码被压缩丑化了，可是去除了 commonjs语法将全部的关联文件中的代码都堆在一个文件中，可是仍是存在一些 const关键字、箭头函数等（这些都是 es6语法，如今比较新的浏览器支持这种语法，可是一些老大的浏览器仍是不支持），这里能够经过配置 webpack使用babel来进行转换和设置。

  知识点补充：

  1. 若是直接在终端使用 webpack命令，此时使用的是全局的 webpack,若是没有安装全局的 webpack即便本地安装了局部的 webpack也会报错找不到命令
  2. 若是安装了局部的 webpack想使用本地的 webpack打包此时应该使用的是 node_module文件夹下的 .bin文件夹下的 webpack进行打包，因此可使用使用 ./node_modules/.bin/webpack来调用本地的 webpack
  3. 除了上述方案使用本地 webpack以外还可使用 npx webpack命令来使用 npx会直接执行 node_modules下的某一个命令
  4. 能够在 package.json添加一个脚本命令以下图 此时就能够直接使用 yarn build,该命令会找到 package.json里面的 scripts里面所建立的 build，而后就会执行里面的命令，而 package.json中的命令会优先去找 node_modules里面的命令，若是node_modules没有对应的命令则会去找全局的

• webpack的配置文件

  在一般状况下，webpack须要打包的项目是很是复杂的，而且咱们须要一系列的配置来知足要求，默认配置必然 是不能够的。咱们能够在根目录下建立一个webpack.config.js文件，来做为webpack的配置文件：默认 webpack回到根目录下的 webpack.config.js文件中读取配置，若是想更改文件名称能够经过 --config来修改默认的配置文件名称以下图: