3-webpack回顾

这里我们会回顾所有跟webpack相关的内容

image.png

一.搭建项目目录结构

• dist
• src
  • css
  • less
  • images
  • js
  • fonts
  • index.html
  • index.js

二.什么是Node.js

一个用js开发的运行环境,内置了V8引擎可以在该平台上运行JS编写的应用程序

三.什么是npm

类似于电脑软件关键,能够实现项目依赖包的安装和卸载

四.如何使用npm

• 安装包

  • 全局安装
    npm i -g 包名称
    安装在node.js的安装目录下
  • 局部安装
    npm i 包名称
    安装在当前项目目录下

• 生成项目配置文件

  • 格式
    npm init
    npm init -y
  • 作用
    在当前项目目录下生成项目配置文件package.json,记录项目的名称,版本,许可协议,依赖的包能重要信息
  • 好处
    后续只要有package.json这个文件,通过npm install指令就会自动下载配置好项目所需要的内容
  • 注意点
    package.json文件中不能写任何注释
    有了package.json文件,以后拷贝项目就不需要拷贝node_modules文件给别人了

• 局部安装指令和特点

  • npm i 包名 --save
    将模块写到生产环境dependencies中,标识项目运行需要的包,如jQuery/zepto/swiper等
  • npm i 包名 --save-dev
    将模块写道开发环境devDependenciew中,标识项目开发需要使用的模块,如webpack/gulp等打包工具

五.webpack中包的基本使用

• 新建一个叫index.js的入口文件
• 安装需要使用的包
• 在入口文件中导入需要使用的包
• 通过接收包的名称使用包中的内容

六.不识别ES6中import语法的问题

通过webpack --mode development
webpack --mode production
将index.js文件中的高级语法编译成浏览器可以识别的低级语法到dist文件夹下的main.js文件中,直接导入main.js就可以了

七.代码测试

• 搭建项目目录
• 生成npm配置文件package.json
  npm init -y
• 安装需要的包
  npm i jquery
  npm i -g webpack
  npm i -g webpack-cli
  npm i wepback --save-dev
  npm i webpack-cli --save-dev
• index.html编写网页结构
• index.js入口文件导入
  import $ from jquery(包名)
• 利用jquery修改样式
• 解决高级语法问题
  webpack --mode development

• 导入main.js

  
  
  image.png
  
  
  image.png
  
  
  image.png