1、前端工程化的意义

  • 什么是前端工程化
    • 避免变量中的命名冲突
    • 开发更规范
    • 性能优化
    • 组件化、组件库
    • 模块化
    • 开发规范
    • 部署自动化
    • 工具
  • 前端发展史
    • 页面在服务端生成
      • Servlet
      • JSP
      • PHP
      • ASP
    • AJAX(Asynchronous JavaScript and XML)带来的前端革命
      • 视图和数据分离
      • image.png
    • Node JS带来的前端革命【JavaScript脱离浏览器运行】

  • 工程化的意义

    • 组件化开发
    • 模块化开发
      • CommonJS
      • ES6 Module

    • 编译打包自动化

      二、前端模块化方案

    • 变量冲突&依赖管理

    • IIFE ———immediately-invoked function expression
    • 模块化的解决方法
      • AMD:ReuqireJS实现AMD规范的库
      • CMD:common
      • UMD:universal
      • CommonJS
      • ES6 Modules ————Babel
    • CommonJS模块导入导出

  • ES6模块化方案详解

    • ES6数据导入导出用法
      • 先定义变量、函数、类 最后使用export导出
      • 在定义变量、函数、类的同时，使用export导出
    • VSCode集成简易的本地服务器

    • export defalut导入导出语法

      • 有时候一个模块中包含一个默认功能，我们不想为这个变量、函数或类起名，我们希望它作为默认的内容导出，由导入者给他命名，这个时候就可以使用export default语法

        三、webpack简介

    • 为什么要使用webpack

      • 模块化打包
      • 兼容更多的前端技术
        • JS规范：ES6、7、8、9
        • Vue、React、Angular
        • CSS预处理器：LESS、SASS等
        • JS的改进：CoffeScript、TypeScript
      • 更多功能
        • 压缩、混淆
        • 管理小素材；如雪碧图
        • 让图片以base64字符串存储
    • webpack的安装
      • 安装NodeJS,自带了npm
      • NodeJS、Webpack、npm、Vue、VueCLI是什么关系
      • node -v
      • 全局安装【局部优先级高】
        • npm install webpack -g
        • npm install webpack@3.6.0 —save-dev
          • —save-dev表示编译期间使用
          • —save表示运行时类库
          • —force 强制安装
    • 搭建webpack脚手架
      • 初始化项目
        • npm init
      • 手动创建src、dist、html
      • 局部安装webpack
        • npm i webpack@5.70.0 —save-dev
      • 编写功能模块【src player.js】
      • 编写入口模块，引入模块功能 【src index.js】
      • 编写webpack.config.js,配置打包入口出口 ```javascript const path = require(“path”)

module.exports ={ entry:”./src/index.js”, output:{ path:path.resolve(__dirname,’dist’), filename:’bundle.js’ } } ```

  1.   - 运行打包命令 node_modules\.bin\webpack
  2.   - package.json中配置build脚本
  3.      - "build":"webpack"
  4.   - 运行打包命令：npm run build
  5.   - index.html中引入bundle.js运行，打印功能文件的内容

四、Webpack基础配置

  • Webpack可以把资源、新技术、新语法翻译成浏览器可以认识的语法，这些”翻译官”就叫做:loader
    • css文件模块打包到js文件
    • scss、less翻译成css代码
    • ES6+或TS翻译成ES5代码
    • JSX或者Vue文件翻译成JS代码、
    • 图片文件转base64代码、打包到js文件
  • 安装对应loader
    • 在main.js中写配置
    • css文件打包：
      • 安装loader
        • npm install —save-dev css-loader style-loader
        • css loader加载样式 style-loader把样式嵌入到文档中
    • 图片资源打包
      • 文件路径处理：npm install —save-dev url-loader file-loader
      • 图片：浏览器缓存
  • ECMAScript是什么
    • ES5 兼容绝大部分浏览器
    • ES 2015 兼容大部分现代浏览器
    • ES 2016 浏览器兼容一般
    • ES 2017 浏览器兼容一般
  • Babel是什么
    • JavaScript编译器，主要用于将ES5+版本转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中
    • 网址：https://www.babeljs.cn/
  • Webpack整合Vue
    • npm安装vue.js
  • webpack插件
    • 对原有功能进行扩展
    • loader
    • htmlWebPackPlugin
      • 把index.html打包到dist目录
      • 把最终打包的bundle.js，以script标签形式引入到index.html中
    • uglifyJsPlugin
      • 对打包的代码进行压缩、丑化，从而代码体积、提高传输效率
  • 环境配置分离
    • 基础配置
      • dev环境配置
      • test环境配置
      • prod环境配置
    • 配置实例：
      • 注意在package.json中配置 并且地址要指定正确
      • image.png