yarn 包管理器

和 npm 类似, 都是包管理工具, 可以用于下载包，但yarn比npm更快

基本命令:

// 1. 初始化
yarn init  /  yarn init -y

// 2. 添加依赖
yarn add [package]
yarn add [package]@[version]

// 3. 移除包
yarn remove [package]
             
// 4. 安装项目全部依赖            
yarn 或者 yarn install

// 5. 全局
yarn global add [package]	// 安装
yarn global remove [package]	// 卸载
复制代码

webpack概述

webpack 是一个基于 NodeJS 的 静态模块打包器 (module bundler) (vue-cli 脚手架环境, 集成了 webpack)

webpack中文文档：webpack.docschina.org/concepts/

webpack 能做什么

webpack是一个静态模块打包器

语法转换
- less/sass转换成css
- ES6转换成ES5
- typescript转换成原生js
- …
html/css/js 代码压缩合并 (打包)
webpack可以在开发期间提供一个开发服务器，提高开发效率

一般项目上线前都会先打包

webpack – 基本使用

webpack 打包演示

建目录 dist public/index.html src/main.js

// 新建文件夹 dist public src
md dist
md public
md src

// 在src文件夹内部，创建文件夹 js css img less fonts
cd src
md js		// 
md css
md img
md less
md fonts

// 在src/js文件夹创建index.js文件
cd js
new-item index.js

// 在public文件夹创建index.html
cd ../../public
new-item index.html
cd ..
复制代码

// index.html
<p>这是p</p>
    <span class="iconfont icon-pic-fill"></span>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>

// index.js
import '../css/index.css'
import '../less/aaa.less'
const $ = require('jquery');
import imgObj from '../img/02.gif'
import '../fonts/iconfont.css'
$(function () {
    $('ul li:odd').css('color','red')
    $('ul li:even').css('color','green')
    const $img=$('<img>')
    $img.attr('src',imgObj)
    $('body').prepend($img)
})

const fn=()=>{
    console.log('这是一个fn');
}
复制代码

初始化

// 初始化，在最外层生成package.json
yarn init -y
复制代码

安装依赖包
```
// 安装依赖包，在最外层生成node_modules文件夹、yarn.lock文件
yarn add webpack  webpack-cli  -D
复制代码
```
dependencies 项目依赖, 实际上线, 也要用的包, 比如 jquery yarn add jquery

devDependencies 开发依赖, 实际上线, 不用这个包, 只在开发打包过程中用 -D

配置scripts

// 在package.json中添加配置
"scripts": {
	"build": "webpack --config webpack.config.js"
}
复制代码

--config webpack.config.js 这个配置文件名为默认值, 不加也会默认找这个文件

配置scripts.png

提供 webpack.config.js

// 在最外层新建webpack.config.js 文件
new-item webpack.config.js
复制代码

添加入口和出口

// 在webpack.config.js 文件，添加入口和出口
const path = require('path')
module.exports = {
   // entry: 配置入口文件 (从哪个文件开始打包)
   entry: './src/js/index.js',
   // output: 配置输出 (打包到哪去)
   output: {
       // 打包输出的目录 (必须是绝对路径)
       path: path.join(__dirname, 'dist'),
       // 打包生成的文件名
       filename: 'index.js',
   },
   // 打包模式 production 压缩/development 不压缩
   mode: 'development',
}
复制代码

执行脚本
```
yarn build
复制代码
```

package.json 中 scripts的使用说明

在package.json文件中, 可以配置 scripts … 配置自己的命令

"scripts": {
	"pp": "yarn add jquery",
	"build": "webpack --config webpack.config.js"
}
复制代码

yarn xxx
npm run pp
npm run build
复制代码

运行方式: npm run xx

特殊的命令: start / stop 可以省略 run

npm run start  => npm start      =>  yarn start
npm run stop  => npm stop        =>  yarn stop
复制代码

使用 yarn 直接不需要加 run

npm run pp  =>  yarn pp
npm run build => yarn build
复制代码

基于 webpack 实现< li >隔行变色

在 index.html 中新建一些 li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是p</p>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
</body>
</html>
复制代码

安装jquery，编写代码
```
yarn add jquery
复制代码
```

在src/js/index.js中,通过jquery实现隔行变色

import $ from 'jquery'
$(function () {
    $('ul li:odd').css('color', 'red')
    $('ul li:even').css('color', 'green')
})
复制代码

执行打包命令
```
yarn build
复制代码
```
将 public/index.html 手动拷贝到 dist 目录，手动引入打包后的 js
```
<script src="https://juejin.cn/post/index.js"></script>
复制代码
```

html拷贝进dist目录.png

运行dist下的index.html

彩色li.png

webpack – 插件和 loaders的配置

自动生成html – `html-webpack-plugin` 插件

每次都要将 public/index.html 手动拷贝到 dist 目录，手动引入打包后的 js，太麻烦

所以一般会用一个插件, 会自动拷贝到 dist下, 并自动引入

下载

yarn add html-webpack-plugin  -D
复制代码

在webpack.config.js文件中，引入这个模块 :

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
复制代码

配置
```
plugins: [
  new HtmlWebpackPlugin({ template: './public/index.html' })
]
复制代码
```
配置好了之后, public 目录的 index.html 就不需要引入打包后的文件了, 会自动被插件生成 html 引入

配置plugins.png

执行打包命令
```
yarn build
复制代码
```
dist下自动生成的index.html，且index.html文件自动引入了index.js

自动引入了js.png

运行dist下的index.html

彩色li.png

webpack中处理 css 文件 – `css-loader`

webpack默认只认识 js 文件和 json文件, 但是webpack 可以使用 loader 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。

所以webpack如果要处理其他文件类型, 记得要先配置对应的 loader

需求: 去掉小圆点, 新建 css 目录

在src/css 文件夹下新建index.css文件，添加样式去除小圆点

cd src/css
new-item index.css
cd ../..
复制代码

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
复制代码

安装依赖

yarn add style-loader css-loader -D
复制代码

src下，在index.js中引入index.css

// 需求: 通过jquery实现隔行变色
import $ from 'jquery'
// 引入index.css,去除小圆点
import '../css/index.css'
$(function () {
    $('ul li:odd').css('color', 'red')
    $('ul li:even').css('color', 'green')
})
复制代码

配置

// 在module.exports对象中添加
module: {
  // loader的规则
  rules: [
    {
      // 正则表达式，用于匹配所有的css文件
      test: /\.css$/,
      // 先用 css-loader 让webpack能够识别 css 文件的内容
      // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
      use: [ "style-loader", "css-loader"]
    }
  ]
},
复制代码

执行打包命令
```
yarn build
复制代码
```

分离 css 文件 `mini-css-extract-plugin`

我们上面的操作，使得css和js文件混杂在一起了

没有css.png

没有发现css的引入，但index.css设置的样式确实生效了

样式依然生效.png

插件: mini-css-extract-plugin

安装依赖包

yarn add mini-css-extract-plugin -D
复制代码

在webpack.config.js文件中，引入这个模块

// 引入分离 css 文件的 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
复制代码

引入分离css文件的模块.png

配置loaders

use: [ // 根据官方文档写的，注意'css-loader'的书写位置
        MiniCssExtractPlugin.loader,
        'css-loader'
      ]
复制代码

配置MiniCssExtractPlugin.png

插件的配置

plugins: [
  new HtmlWebpackPlugin({ template: './public/index.html' }),
  
  // 定义打包好的文件的存放路径和文件名
  new MiniCssExtractPlugin({ 
 		filename:'css/index.css'
  })
  
],
复制代码

配置css打包路径.png

执行打包命令
```
yarn build
复制代码
```
dist/index.html中js和css的引入，成功分离

js和css分离.png

webpack 中处理 less – `less-loader`

在src/less文件夹下新建aaa.less文件

cd src/less
new-item aaa.less
cd ../..
复制代码

在aaa.less中设置p标签样式

p{
    color: blue;
}
复制代码

下载依赖包

注意: 解析less文件需要识别 less 语法, 所以除了 less-loader 需要额外下载 less 包

less-loader: 将less转换成 css
```
yarn add less  less-loader  -D
复制代码
```
src下，在index.js中引入aaa.less

引入less.png

配置

// 配置 less 文件的解析
{
  test: /\.less$/,
  use: [
    // 分离出 css 内容
    MiniCssExtractPlugin.loader, 
    'css-loader',
    'less-loader' 
  ]
}
复制代码

配置less解析.png

执行打包命令
```
yarn build
复制代码
```
aaa.less引入成功，p标签变蓝

p标签变色.png

webpack 中处理图片 – 内置的 asset module

预先在src/img文件夹下放置好图片01.jpg、02.gif

准备图片.png

直接将图片插入html会报错
```
import imgObj from '../img/02.gif'

$(function() {
  const $img = $('<img>')
  $img.attr('src', imgObj)
  $('body').append($img)
})
复制代码
```
此时需要用webpack5 内置的 asset 资源处理模块，来处理图片资源

webpack5 处理资源： webpack.docschina.org/guides/asse…

tips: webpack4 中来处理图片的问题, 主要用到 url-loader 和 file-loader 两个模块，现 webpack5 已集成，无需安装。

插入图片.png

**配置 rules 基本规则： **
```
{
  test: /\.(png|jpg|gif|jpeg)$/i,
  type: 'asset'
}
复制代码
```
- 对于小于 8k 的图片，会自动转 base64 字符串（节约请求次数，成本：放大约30%的图片体积大小）
- 对于大于 8k 的图片，会生成单独文件引入。

配置图片的打包输出目录：

默认是直接输出到了 dist 根目录, 可以通过 generator 进行配置

{
  test: /\.(png|jpg|gif|jpeg)$/i,
  type: 'asset',
  generator: {
    filename: 'images/[hash][name][ext]'
  }
}
复制代码

配置图片的打包输出目录.png

执行打包命令
```
yarn build
复制代码
```
dist文件夹下成功生成images文件夹

生成images文件夹.png

打开dist/index.html，插入图片成功

插入图片成功.png

webpack 配置字体图标 – 和图片一致

字体图标和图片的配置一致

准备字体图标文件

准备字体图标文件.png

在public/index.html文件中引入字体图标

<span class="iconfont icon-pic-fill"></span>
复制代码

在src/js/index.js中引入iconfont.css

引入字体图标.png

执行打包命令
```
yarn build
复制代码
```
打开dist/index.html，添加字体图标成功

添加字体图标成功.png

webpack 使用 babel 处理高版本的 js 语法

webpack 默认仅内置了模块化的兼容性处理 import export

babel 的介绍 => 用于处理高版本 js语法的兼容性

安装包

yarn add -D babel-loader @babel/core @babel/preset-env
复制代码

配置规则

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}
复制代码

在src/js/index.js中添加一个es6中的箭头函数

const fn=()=>{
    console.log('这是一个fn');
}
复制代码

执行打包命令
```
yarn build
复制代码
```
打开dist/index.js,箭头函数被转化为普通function函数

箭头函数降级.png

webpack – 开发服务器

webpack-dev-server自动刷新

下载

yarn add webpack-dev-server -D
复制代码

配置scripts

"scripts": {
	"build": "webpack --config webpack.config.js",
	"dev": "webpack serve --config webpack.config.js"
}
复制代码

dev配置scripts.png

执行打包命令
```
yarn dev
复制代码
```
默认手动在8080端口打开后，可以自动刷新

默认8080端口.png

webpack-dev-server 的配置

更改webpack-dev-server默认打开的端口号，并设置自动打开浏览器

devServer: {
  port: 3000, // 端口号
  open: true // 自动打开浏览器
}
复制代码

自定义端口.png

执行打包命令

yarn dev
复制代码

改变端口成功.png

文章版权归作者所有，未经允许请勿转载。

THE END

前端

phpBB 远程拒绝服务漏洞

Navicat连接Mysql报错：Client does not support authentication protocol requested by se

【PC,安卓,IOS】数据恢复软件集合分享

vite源码分析(1) :resolveConfig参数解析

谷歌的新Drive应用用Drive文件流取代了备份和同步

VersatileBulletinBoard信息泄露漏洞

yarn和webpack的基本使用

yarn 包管理器

webpack概述

webpack 能做什么

webpack – 基本使用

webpack 打包演示

package.json 中 scripts的使用说明

基于 webpack 实现< li >隔行变色

webpack – 插件和 loaders的配置

自动生成html – `html-webpack-plugin` 插件

webpack中处理 css 文件 – `css-loader`

分离 css 文件 `mini-css-extract-plugin`

webpack 中处理 less – `less-loader`

webpack 中处理图片 – 内置的 asset module

webpack 配置字体图标 – 和图片一致

webpack 使用 babel 处理高版本的 js 语法

webpack – 开发服务器

webpack-dev-server自动刷新

webpack-dev-server 的配置

phpBB 远程拒绝服务漏洞

Navicat连接Mysql报错：Client does not support authentication protocol requested by se

【PC,安卓,IOS】数据恢复软件集合分享

vite源码分析(1) :resolveConfig参数解析

谷歌的新Drive应用用Drive文件流取代了备份和同步

VersatileBulletinBoard信息泄露漏洞

yarn和webpack的基本使用

yarn 包管理器

webpack概述

webpack 能做什么

webpack – 基本使用

webpack 打包演示

package.json 中 scripts的使用说明

基于 webpack 实现< li >隔行变色

webpack – 插件 和 loaders的配置

自动生成html – html-webpack-plugin 插件

webpack中处理 css 文件 – css-loader

分离 css 文件 mini-css-extract-plugin

webpack 中处理 less – less-loader

webpack 中处理图片 – 内置的 asset module

webpack 配置字体图标 – 和图片一致

webpack 使用 babel 处理高版本的 js 语法

webpack – 开发服务器

webpack-dev-server自动刷新

webpack-dev-server 的配置

webpack – 插件和 loaders的配置

自动生成html – `html-webpack-plugin` 插件

webpack中处理 css 文件 – `css-loader`

分离 css 文件 `mini-css-extract-plugin`

webpack 中处理 less – `less-loader`