yarn包管理工具

中文官网地址：https://yarn.bootcss.com/

快速、可靠、安全的依赖管理工具。和npm类似，都是包管理工具，可以用于下载包，比npm快

下载

npm install --global yarn

yarn --version
1
2
3

使用

• 新建空白文件夹，执行命令

  yarn init
1

• 添加依赖

  yarn add 模块名
  yarn add 模块名@xx.xx.xx.xx
  
  yarn global add @vue/cli
1
2
3
4

@xx.xx.xx.xx是指版本号

webpack

https://www.webpackjs.com/

webpack是node的第三方模块包，用于打包代码

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

把很多文件打包整合到一起，缩小项目体积，提高加载速度

功能：

less/sass -> css

ES6/7/8 ->ES5

html/css/js ->压缩合并

使用步骤

默认入口文件 ./src/index.js

默认出口文件 ./dist/main.js

1：初始化包环境
	yarn init
2:按装依赖包
	yarn add webpack webpack-cli -D
3:package.json配置scripts（自定义命令）
	"scripts":{
	  "build":"webpack"
	}
4:新建src/add/index.js
	export const addFn = (a,b)=>a + b
5:src/index.js 
	import { addFn } from "./add";
	console.log(addFn(3, 5));
6:运行打包命令
	yarn build
	or
	npm run build
总结：src并列处，生成默认dist目录和打包后默认main.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

代码变更，如何重新打包

4:新建src/tool/index.js
	export const getArrSum = arr => arr.reduce((sum, val) => {
	  sum += val
	},0)
5:src/index.js 
	import { addFn } from "./add";
	import { getArrSum } from "./tool"
	console.log(addFn(3, 5));
	console.log(getArrSum([3, 5, 6]));
	console.log(addFn(3, 5));
6:运行打包命令
	yarn build
总结：src是开发环境，dist是打包后 ，两个分别独立； 打包后代码压缩，变量压缩（简写）
1
2
3
4
5
6
7
8
9
10
11
12
13

webpack配置

如何指定webpack的入口和出口

1：src并列处，新建webpack.config.js 
2: 填入配置项
1
2

const path = require('path');
module.exports = {
  entry: './src/main.js',   //入口
  output: {
    path:path.join(__dirname,"dist"),   //出口路径
    filename: 'build.js'  //出口文件明
  }
};
1
2
3
4
5
6
7
8

案例-webpack打包隔行变色

• 初始化包环境
  yarn init
• 下载依赖包
  yarn add webpack webpack-cli -D
• 配置自定义打包命令 package.json

	"scripts":{
	  "build":"webpack"
	}
1
2
3

• 下载jquery。新建pubic/index.html

• src/main.js

  // import浏览器支持不是很好，使用webpack转换
  import $ from 'jquery';
  $(function () {
    $("#app li:nth-child(odd)").css('color','red');
    $("#app li:nth-child(even)").css('color','blue');
  })
1
2
3
4
5
6

• 执行打包命令观察效果

• 在dist目录下把public/index.html复制过来

• 在index.html中 手动引入打包后build.js

自动生成html文件

webpack只能打包js文件，插件HtmlWebpackPlugin简化了HTML文件的创建

• 按装

  npm install --save-dev html-webpack-plugin
  1

• webpack.config.js

  var HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  module.exports = {
    entry: './src/main.js',   //入口
    output: {
      path:path.join(__dirname,"dist"),   //出口路径
      filename: 'build.js'  //出口文件明
    },
    plugins: [new HtmlWebpackPlugin({
      // 以此为基准 生成打包后html文件
      template:'./public/index.html'
    })]
  };
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

• 重新打包，观察dist下是否多出html 运行

处理css文件–加载器

webpack默认只认识js文件和json文件

• 新建src/css/index.css

• 把css文件引入到入口文件(main.js) 被webpack打包
  import './css/index.css'

• 加载器 loaders加载器，让webpack处理其他类型的文件，打包到js中

  yarn add style-loader css-loader -D
  1

• webpack.config.js

   module: {
      rules: [  //loader的规则
        {
          test: /\.css$/,  //匹配所有的css文件
          // use数组中从右向左运行
          // 先用css-loader让webpack识别css文件的内容打包
          // style-loader 把css加载到dom中
          use:['style-loader','css-loader']
        },
        ]
     }
1
2
3
4
5
6
7
8
9
10
11

处理less文件

• 下载

  yarn add less less-loader -D
  1

• src下新建less文件

• 入口main.js中引入less

• 配置文件webpack.config.js

  module: {
      rules: [  //loader的规则
        {
          test: /\.less$/,  //匹配所有的css文件
          // use数组中从右向左运行
          
          // 1：less-loader 让webpack处理less文件 还会用less翻译less代码转换成css内容
          // 2：先用css-loader让webpack识别css文件的内容打包
          // 3：style-loader 把css加载到DOM中
          use:['style-loader','css-loader','less-loader']
        }
      ]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

• 打包

找到对应得加载器，让webpack处理不同得文件

处理图片文件

用asset module方式(webpack 5版本新增)

如果使用的是webpack5版本的，在webpack.config.js的rules里配置

 module: {
    rules: [  //loader的规则
      {
        test: /\.(png|jpg|gif)$/i,
        type:"asset"
      }
    ]
    }
1
2
3
4
5
6
7
8

src目录下新建assets文件夹，准备两张图片

less文件中设置：把图片1 设置为背景图片

body{
  background: url(../assets/img01.jpg) no-repeat center;
}
1
2
3

main.js把大图片插入到创建的img标签上，添加到body中

import imgUrl from './assets/img02.jpg'
import './css/index.css'
import './less/index.less'
console.log(addFn(3, 5));
console.log(getArrSum([3, 5, 6]));
const theImg = document.createElement('img');
theImg.src = imgUrl;
document.body.appendChild(theImg);
1
2
3
4
5
6
7
8

打包运行

处理字体文件

• webpack.config.js配置 webpack5版本

   module: {
      rules: [  //loader的规则
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/i,
          type: "asset/resource",
          generator: {
            filename: 'font/[name][hash:6][ext]'
          }
        }
      ]
    }
1
2
3
4
5
6
7
8
9
10
11

• webpack4以及以下使用如下配置

  module: {
      rules: [  //loader的规则
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 2 * 1024,
                // 配置输出的文件名
                name: '[name].[ext]',
                // 配置输出的文件目录
                outputPath:"font-s/"
              }
            },
          ]
        }
      ]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• assets文件夹中放入字体库font

• main.js中引入iconfont.css

• 在public/index.html中使用字体图标

• 打包

打包高版本的js

让webpack对高版本的js代码，降级处理后打包
使用Babel模块

• 下载

  yarn add -D babel-loader @babel/core @babel/preset-env
  1

• 配置规则

    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          // 预设转码规则 用babel开发环境本来预设的
          presets: ['@babel/preset-env']
        }
      }
    }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• main.js中使用箭头函数

  const fn = () => {
    console.log("babel-高级语法")
  }
  // 必须打印函数，而不是调用，不然webpack会把函数精简成一句打印语句，舍弃函数体
  //webpack会舍弃未使用的代码
  console.log(fn)
  1
  2
  3
  4
  5
  6

• 打包

webpack开发服务器

出现的问题：每次修改完代码，都要重新打包，很费时

为什么费时

• 构建依赖
• 磁盘读取对应的文件到内存，才能加载
• 用对应的loader进行处理
• 将处理完的内容，输出到磁盘指定目录

如何解决：

开发服务器，在电脑内存中打包，缓存一些已经打包过的内容，只重新打包修改的文件最终运行加载在内存中给浏览器使用

webpack-dev-server自动刷新 启动服务，实时更新修改的代码，打包变化的代码到内存中，提供端口让网页访问

• 下载

  yarn add webpack-dev-server -D
  1

• 配置自定义命令

  "scripts": {
      "build": "webpack",
      "serve": "webpack serve"
    },
  1
  2
  3
  4

  课堂上老师还在webpack.config.js的module.exports里插入了"mode": "development",

• 启动webpack开发服务器

  yarn serve
  
  npm run serve
  1
  2
  3

• 只要修改了src下的资源代码，就会直接更新内存打包，然后反馈到浏览器上

配置/修改端口，在webpack.config.js中加入：

devServer: {
     port:3000  //端口号
  },
1
2
3

总结

• 什么是webpack

  打包模块化的JavaScript工具，在webpack中一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，
  专注于构建模块化项目
  1
  2

• 优点

  1：专注于构建模块化项目
  2：通过plugin扩展
  3：loaders扩展，可以让webpack把所有类型的文件都解析打包
  1
  2
  3

作业:

1:打包时，如何把css提取成一个独立的文件;
打包后的文件夹下多一个独立的css文件里面有css代码

需要一个加载器

2：如何让webpack打包vue文件，把App.vue的内容显示到index.html里

参考vue-loader官网

在public/index.html准备div 设置id为app

yarn add vue

main.js中引入App.vue

import App from './APP.vue' 
import  Vue from 'vue'
new Vue({
 render:h=>h(APP)   //渲染函数，渲染APP组件里的标签
}).$mount(‘#app)  //把vue文件的标签结构 挂载到id为app的标签里
1
2
3
4
5

打包后运行 dist/index.html,观察vue文件里的标签是否渲染到页面上