Webpack简介及打包演示

  1. Webpack 是一个静态模块打包工具,从入口构建依赖图,打包有关的模块,最后用于展示你的内容
    在这里插入图片描述

  2. 静态模块:编写代码过程中的,html,css, js,图片等固定内容的文件

  3. 打包过程,注意:只有和入口有直接/间接引入关系的模块,才会被打包

Webpack简介及打包演示_第1张图片

  1. Webpack 的作用:把静态模块内容,压缩,整合,转译等(前端工程化)

    • 把 less/sass 转成 css 代码
    • 把 ES6+ 降级成 ES5 等
    • 支持多种模块文件类型,多种模块标准语法
  2. 为何不学 vite?

    现在很多项目还是基于 Webpack 来进行构建的,所以还是要掌握 Webpack 的使用

  3. 体验 Webpack 打包 2 个 JS 文件内容

  4. 需求:封装 utils 包,校验手机号和验证码长度,在 src/index.js 中使用,使用 Webpack 打包

  5. 步骤:

    1. 新建项目文件夹 Webpack_study,初始化包环境,得到 package.json 文件

      npm init -y
      
    2. 新建 src 源代码文件夹(书写代码)包括 utils/check.js 封装用户名和密码长度函数,引入到 src/index.js 进行使用

      • src/utils/check.js

        // 封装校验手机号长度和校验验证码长度的函数
        export const checkPhone = phone => phone.length === 11
        export const checkCode = code => code.length === 6
        
      • src/index.js

        /**
         * 目标1:体验 webpack 打包过程
         */
        // 1.1 准备项目和源代码
        import { checkPhone, checkCode } from '../utils/check.js'
        console.log(checkPhone('13900002020'))
        console.log(checkCode('123123123123'))
        // 1.2 准备 webpack 打包的环境
        // 1.3 运行自定义命令打包观察效果(npm run 自定义命令)
        
    3. 下载 webpack webpack-cli 到项目(版本独立)

      npm i webpack webpack-cli --save-dev
      

      注意:虽然 webpack 是全局软件包,封装的是命令工具,但是为了保证项目之间版本分别独立,所以这次比较特殊,下载到某个项目环境下,但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令,作为局部命令使用

    在这里插入图片描述

    1. 项目中运行工具命令,采用自定义命令的方式(局部命令)

      npm run build
      

      npm run 自定义命令名字

      注意:实际上在终端运行的是 build 右侧的具体命名

    2. 自动产生 dist 分发文件夹(压缩和优化后,用于最终运行的代码)

  6. 需求最终流程图:
    Webpack简介及打包演示_第2张图片
    执行完打包流程后,会在项目下生产dist/main.js

(()=>{"use strict";console.log(!0),console.log(!1)})();

这是编译完的结果,从index.js开始执行编译,调用对应的check方法,check方法所产生的结果已经展示在编译后的文件中,所以这两个check方法就不会再整合到dist文件中了。

Webpack 修改入口和出口

  1. 使用Webpack默认的打包入口路径是从./src/index.js开始的,打包后的文件默认输出位置为:./dist/main.js

  2. Webpack 配置:影响 Webpack 打包过程

  3. 步骤:

    1. 项目根目录,新建 Webpack.config.js 配置文件

    2. 导出配置对象,配置入口,出口文件路径(别忘了修改磁盘文件夹和文件的名字)

      const path = require('path')
      
      module.exports = {
        entry: path.resolve(__dirname, 'src/login/index.js'),
        output: {
          path: path.resolve(__dirname, 'dist'),
          filename: './login/index.js'  
        }
      }
      
    3. 重新打包就能发现效果

案例-用户登录-长度判断

目标

体验前端项目代码,如何被 Webpack 打包和使用

讲解

  1. 需求:点击登录按钮,判断手机号和验证码长度是否符合要求

  2. 步骤:

    1. 新建 public/login.html 准备网页模板(方便查找标签和后期自动生成 html 文件做准备)

      Webpack简介及打包演示_第3张图片

    2. 核心 JS 代码写在 src/login/index.js 文件

      /**
       * 目标3:用户登录-长度判断案例
       *  3.1 准备用户登录页面
       *  3.2 编写核心 JS 逻辑代码
       *  3.3 打包并手动复制网页到 dist 下,引入打包后的 js,运行
       */
      // 3.2 编写核心 JS 逻辑代码
      document.querySelector('.btn').addEventListener('click', () => {
        const phone = document.querySelector('.login-form [name=mobile]').value
        const code = document.querySelector('.login-form [name=code]').value
      
        if (!checkPhone(phone)) {
          console.log('手机号长度必须是11位')
          return
        }
      
        if (!checkCode(code)) {
          console.log('验证码长度必须是6位')
          return
        }
      
        console.log('提交到服务器登录...')
      })
      
    3. 运行自定义命令,让 Webpack 打包 JS 代码

    4. 手动复制 public/login.html 到 dist 下,手动引入打包后的 JS 代码文件,运行 dist/login.html 在浏览器查看效果

小结

由于Webpack默认只会打包js资源,html并不会打包进入,生成的打包js会放在dist中,html要想调用打包后的js也需要放到dist文件夹中,并且通过

你可能感兴趣的:(前端,webpack,前端,node.js)