初识webpack

Potato_土豆
419 阅读5分钟

  • 前端发展史

    • 早期阶段
      早期前端只负责写静态页面，纯粹的展示功能，js也就是简单的做一些表单的验证，特效渲染等
    • 现阶段的Web
      前端可以管理数据以及和用户互动。由于用户交互、数据交互的需求增多，也就出现了jQuery这样的前端工具,再到目前的三大框架Vue、React、Angular，开发方式也冲原来的js的ES5语法到ES6、7、8、9、10，到Type Script，包括编写CSS的预处理器less、scss等

  • webpack到底是干什么的

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

  • 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执行流程.png

  • webpack的默认打包

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

    1. 没有打包之前（直接引入index.js） image.png会报错，应为浏览器不识别 commonjs中的 require函数

    2. 打包之后（引入打包之后的js） image.png发现能正常运行。
      此时可以看一下打包后生成的 main.js文件 image.png发现文件中的代码被压缩丑化了，但是去除了 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添加一个脚本命令如下图 image.png 此时就可以直接使用 yarn build,该命令会找到 package.json里面的 scripts里面所创建的 build，然后就会执行里面的命令，而 package.json中的命令会优先去找 node_modules里面的命令，如果node_modules没有对应的命令则会去找全局的

  • webpack的配置文件

    在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然 是不可以的。我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：默认 webpack回到根目录下的 webpack.config.js文件中读取配置，如果想更改文件名称可以通过 --config来修改默认的配置文件名称如下图: image.png
avatar
文章
阅读
粉丝