webpack使用

yarn包管理器(可选)

==注意: 如果yarn实在安装不上可以用npm==

快速、可靠、安全的依赖管理工具。(类似npm作用)

中文官网地址: Yarn 中文文档

下载地址: 安装 | Yarn 中文文档

• windows - 软件包(在笔记文件夹里)

  • ==建议不要安装到中文路径下==

  • ==建议和node安装到一个盘符下==

• mac - 通过命令安装(也可还用npm)

首先 npm init 初始化npm 

 然后使用下列代码 

npm i -g yarn

安装完后 可以进行后续的操作(不安装也是可以的,但是推荐安装,方便后续学习.)

yar使用方法:

# 1. 初始化, 得到package.json文件(终端路径所在文件夹下)
yarn init
# 类似: npm init

# 2. 添加依赖(下包)
# 语法: yarn add [package]
# 语法: yarn add [package]@[version]
yarn add jquery
yarn add jquery@3.5.1
# 类似: npm install jquery

# 3. 移除包
# 语法: yarn remove [package]
yarn remove jquery
# 类似: npm remove jquery
             
# 4. 安装项目全部依赖(一般拿到别人的项目时, 缺少node_modules)          
yarn
# 会根据当前项目package.json记录的包名和版本, 全部下载到当前工程中
# 类似: npm i

# 5. 全局
# 安装: yarn global add [package]
# 卸载: yarn global remove [package]
# 注意: global一定在add左边
yarn global add @vue/cli
# 类似: npm install -g @vue/cli 

webpack-概念

 

开发完项目, 可以用node+webpack来分析, 翻译, 压缩, 打包, ==加快浏览器打开速度==

概念

webpack官网

• 现代 javascript 应用程序的 静态模块打包器 (module bundler)

  • 静态: 文件资源

  • 模块: node环境, 引入文件, 遵守模块化语法

• 除了合并代码, 还可以翻译和压缩代码

  • less/sass -> css

  • ES6/7/8 -> ES5

  • html/css/js -> 压缩合并

什么是webpack?

• 静态模块打包器
• 还能翻译和压缩代码
• 减小代码包体积, 让浏览器更快速打开网页

​

webpack-使用前-准备

webpack依赖Node环境

npm或yarn等模块管理工具

创建基础文件夹,我这里是9.22 代表的意思是 9月22日博客更新 大家可自己命名

 如果之前yarn包已经安装完毕 然后就执行以下这段代码

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D

安装完毕然后继续进行以下操作

在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

 在这里添加好命令符

webpack-基础使用

使用webpack, 打包2个js文件

步骤如下:

1.新建src/add/add.js 定义求和函数导出

export const addFn = (a, b) => a + b

2.新建src/index.js导入使用

// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));

3.运行打包命令

yarn build

出现这些即代表运行打包完成

结构书写如下:

然后让我们看看结果  

1. src并列处, 生成dist目录和main.js文件

2. 查看main.js文件, 是打包压缩后的代码

(()=>{"use strict";console.log(7)})();

 关系图如下:

小结: 

1.先下载webpack 配置打包命令 

2.默认入口src/index.js 要被打包的文件要引入到这里使用.

3.输入 yarn build打包命令(实际是项目环境webpack命令)

4.输出代码到dist/main.js中

webpack-更新打包

新建src/tool/tool.js - 导出数组求和方法

export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

src/index.js - 导入使用

import { addFn } from './add/add'
import { getArrSum } from './tool/tool'
console.log(addFn(5, 2));
console.log(getArrSum([5, 6, 9, 10]));

 然后重新打包

yarn build

格式如下

 目录结构如下:

(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();

如果你正在看这段文字,你最好还是一边敲写,一边看,不然你看了也白看

webpack-配置修改

修改默认入口和出口

默认入口: src/index.js

默认出口: dist/main.js

项目根目录 - 新建webpack.config.js文件 (默认配置文件名)

填入配置项

const path = require("path")
module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}

修改代码里src/index.js 为 src/main.js

(package.json修改成以下内容)

{
  "name": "base",
  "version": "1.0.0",
  "main": "index.js",
  "author": "lidongxu",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0"
  },
  "scripts": {
    "build": "webpack"
  }
}

重新打包观察输出文件名字  

这样 修改为bundle.js的压缩后位置 成功了

webpack-打包流程图

小结

1. 简述总结下打包流程?

   • 执行局部webpack命令(前提项目中下载了webpack包)
   • 有webpack.config.js用, 否则用内置默认
   • 根据入口建立引入关系
   • 编译翻译整合打包输出到指定位置
   ​

2. 模块想要被webpack识别打包, 要注意什么?

   ​模块文件要和webpack入口产生直接或间接引入关系