vue第一天 webpack

适用人群
A.对vue框架感兴趣 
B.前端在职,提高进一步的需求
C.希望快速入门vue开发的相关人员

前置储备

必备前提:
HTML + CSS +JS
WebAPI
Ajax

可选前提
Node.js

第一天：

前端工程化与Webpack
前端工程化的相关概念
Webpack的常见用法
打包发布
Source Map

目标：
了解工程化的前端开发方式

能够指定Webpack在实际开发中所起到的作用

学习目标1 
Webpack的学习目标

理解什么是前端工程化
转变对前端开发的认知

了解Webpack的基本用法
为vue和react的学习做技术储备

不强制要求手动配置Webpack
一定要知道Webpack在项目中有什么作用
清除Webpack中的核心概念

1.理想中的前端开发与实际的前端开发
会写HTTP+CSS+JS
需要美化页面样式,会弄一个bootst
需要操作DOM或发起Ajax请求,会弄jQuery
需要快速实现网页布局效果,会弄Layui

实际的前端开发
模块化(js的模块化、css的模块化、资源的模块化)
组件化(复原现有的UI结果、样式、行为)
规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
自动化(自动化构建、自动部署、自动化测试)

2什么是前端工程化

指的是：企业级的前端项目开发中,把前端开发所需的工具 技术 流程 经验等进行规范化
    标准化

企业中的vue和react,都是基于工程化的方式进行开发的

好处：前端开发自成体系,有一套标准的开发方案和流程

3前端工程化的解决方案

早期的前端工程化解决方案
grunt
gulp

目前主流的前端工程化解决方案
webpack
parcel

 webpack的基本使用

1.什么是webpack

概念:webpack是前端项目工程化的具体解决方案

主要功能：它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理器端JS的兼容
      性能优化等强大的功能。

好处：把工作的重新放到具体功能的实现上,提高了前端开发效率和项目的可维护性

注意：目前ver,react等前端项目,基本上都是基于webpack进行工程化开发

通俗:可以把高级代码转成低级代码 

2.创建列表隔行变色项目

新建项目空白目录,并运行 npm init -y命令,初始化包管理配置文件package.json
新建src源代码目录
新建src->index.html首页和src->index.js脚本文件
初始化首页基本的结构
运行npm install jquery -S命令 安装jQuery
通过ES6模块化的方式导入jQuery，实现列表隔行变色效果

npm install jquery -S == npm install jquery --save

-D=--save -dev  

 

3.项目中安装webpack

在终端运行如下的命令,安装webpack相关的两个包

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

4.在项目中配置webpack

不能只安装不配置

1在项目根目录中,创建名为webpack.config.js的webpack.js配置文件

module.esports ={
  node:'development'用来指定构建模式,可选值有development和production
}

2在package.json的script节点下,新增dev脚本

"script":{
     "dev":"webpack"//script节点下的脚本 可以通过npm run
}

3在终端中运行npm run dev命令 启动webpack进行项目的打包构建

asset main.js 328 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 286 KiB
  ./src/index.js 310 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 286 KiB [built] [code generated]
webpack 5.79.0 compiled successfully in 234 ms

4.使用porduction和development

porduction
asset main.js 88.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
cacheable modules 286 KiB
  ./src/index.js 310 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 286 KiB [built] [code generated]
webpack 5.79.0 compiled successfully in 1293 ms

porduction的main.js文件会被压缩混淆 打包时间很长 体积小

development的main.js文件 打包时间很短 体积大 

开发的时候追求的是打包的速度
上线的时候才追求体积

4.2 webpack中的默认约定

在webpack4.x和webpack5.x版本中,如下的默认约定

默认的打包入口文件为src->index.js
默认的输出文件路径为dist->main.js

注意：可以在webpack.config.js中修改打包的默认约定

4.3自定义打包的入口与出口

在webpack.config.js配置文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口

__dirname表示所处的根目录

    entry: path.join(__dirname, './src/index.js'),
    // __dirname表示所处的根目录
    // 指定生成的文件要存放放到哪里
    output: {
        // 存放到目录
        path: path.join(__dirname, 'dist'),
        //生成的文件名
        filename: 'bundle.js'
        // 就说默认main名字 变成bundle.js 记得js的路径要变
    }

4.4 webpack插件的使用

通过安装和配置第三方的插件可以拓展webpack的能力 从而让webpack用起来很方便

1 webpack-dev-server

每当修改了源代码 webpack会自动进行项目的打包和构建

运行如下命令

npm install webpack-dev-server@3.11.2 -D

2配置webpack-dev-server

修改->package.json->scripts中的dev命令如下

"scripts":{
    "dev":"webpack serve"
}

2 再次运行npm run dev命令,重新进行项目的时候

3 在浏览器中访问http://localhost:8080地址,查看自动打包效果

如果要停止webpack-dev-server
ctrl + c 连续两次

4.4 安装 html-webpack-plugin

运行如下的命令 即可在下面中安装

npm install html-webpack-plugin@5.3.2 -D

1 通过HTML插件复制到项目目录中的index.html页面 也被放到内存中
2 HTML插件在生成的index.html页面 自动注入了打包的bundle.js文件

4.5 devServer节点

在webpack.config.js配置文件中,可以通过devServer节点对webpack.config.js插件进行配置

    devServer: {
        // 首次打包成功后 自动打开浏览器
        open: true,
        // http协议中 端口是80 则可以省略
        port: 80,
        // 指定运行的主机地址
        host: '127.0.0.1'
    }

注意 凡是修改了webpack.config.js配置文件 或者修改了package.json配置文件
     必须重启实时打包的服务器,否则最新的配置文件无法失效

webpack中的loader

1.loader加载器概述

实际开发中,webpack默认只能打包处理以.js后缀名的模块,其他的模块默认处理不了
需要调用loader加载器才可以正常打包,否则报错

loader加载器的作用:协助webpack打包处理特定的文件模块

css-loader可以打包处理.css相关的文件
js-loader可以打包处理.js相关的文件
html-loader可以打包处理.htl相关的文件

2.loader的调用过程

                        ->是否配置了babel

              ->是否包含了高级js语法
打包的文件模块 ->是否为js            ->webpack进行处理
                        ->loader进行处理
              ->是否配置了对于loader
                        ->报错

3.打包处理css文件

运行npm i style-loader@3.0.0 css-loader@5.2.6 -D

在webpack.config.js的module->rule的数组中 添加数组

    module: {
        rules: [
            // 定义了不同模块对应的loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }

其中test 表示匹配的文件类型 use表示对应要调用的loader

注意:
use数组中指定的loader 顺序是固定的

多个loader的调用顺序是:从后往前调用

4.打包处理less文件

运行npm i less-loader@10.0.1 less-loader@4.1.1 -D    

在webpack.config.js的module->rule的数组中 添加数组
 module: {
        rules: [
            // 处理.less文件的loader
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        ]
    },

5.base64的图片优缺点

base的缺点是内存为变，
优点既获得小图片和他标签也防止没有必要的请求

6.打包处理样式表中与url路径相关的文件

运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令

在webpack.config.js的module->rule的数组中 添加数组

    module: {
        rules: [
            // 处理图片文件的loader
            // 如果需要调用的loader只有一个 则只传递一个
            { test: /\.jjpg|png|gif$/, use: 'url-loader?limit=22229' }
        ]
    },

其中?之后的是loader的参数项

limit用来指定图片的大小,单位是字节

只有<=limit大小的图片,才会被转为base64格式的图片

7. 打包处理js文件中的高级语言

webpack只能打包处理一部分高级语言的js语法 对于哪些webpack无法处理的高级js语法

需要借助于babel-loader 进行打包处理 例如webpack无法处理下面的js代码

7.1 安装babel-loader相关的包

运行如下的命令安装对应的依赖包:

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在webpack.config.js的module->rules数组中 添加loader规则如下

注意： 必须使用exclude 指定排除项：因为node_modules 目录下的第三方插件

{test: /\.js$/,use:'babel-loader',exclude:/node_modules/}

7.2 配置babel-loader

在项目根目录下 创建名为babel.config.js的配置文件 定义babel的配置项

 // 使用babel-loader处理高级的js语法 只需要自己的代码进行转换即可

            // 一定要排除node_modules目录中的js文件
            // 因为第三方包的js兼容性 不需要关心
            { test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/' }

打包发布

1.配置webpack的打包发布

在package.json文件的scripts节点下 新增build命令

  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },

--model是一个参数项,用来指导webpack的运行模式 
production代表生产环境 会对打包生成的文件

进行代码压缩和性能优化

注意:
通过--model指定的参数项,会覆盖webpack.config.js中的model选项

2. js文件统一生成js目录中

在webpack.config.js配置文件的output节点中

output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/bundle.js'
        //两个意思就是放到dist目录下的js文件夹之中
    },

 // 在配置url-loader的时候 多个参数之间使用&&符号进行分割
  { test: /\.jjpg|png|gif$/, use: 'url-loader?limit=22229 && outputPath=images' },

8. 自动清理dist目录下的旧文件

为了每次打包发布时自动清理dist目录中的旧文件 
可以安装配置clean-webpack-plugin

安装清理dist目录 webpack插件

npm install clean-webpack-plugin@3.0.0 -D

2. 导入插件 得到插件的构造函数之后 创建插件实例对象

Source Map

1. 什么是Source Map

Source Map就是一个信息文件,里面储存着位置信息
Source Map文件中储存着压缩混淆后的代码 所对应的转换前的位置

有了它 出错的时候 除错工具直接显示原始代码 而不是转换后的代码 能够极大方便的后期调试

2. 默认Source Map的问题

开发环境下默认生成的Source Map,记录的是生成后的代码的位置。
会导致运行时报错的行数与源代码的行数不一致的问题

3.解决默认Source Map的问题

开发环境下,推荐在webpack.config.js中添加如下的配置
即可保证运行时报错的行数与源代码的行数保持一致

module.exports = {
// 开发调试阶段 建议把devtools的值改为eval-source-map
   devtools: 'eval-source-map',
    mode: 'development',//用于构建模式 production和development
    
}

4.webpack生产环境中Source Map

在生产环境中 如果省略devtool,则最终生成的文件不包含source map
这能够防止原始代码通过Source Map形式暴露给另有所图之人

5.只定位行数不暴露

在生产环境中 如果只想定位报错的具体行数 且不想暴露源码
此时可以将devtool的值设置为nosources-source-map

module.exports = {
// // 发布阶段 建议把devtools的值改为nosources-source-map
   devtools: 'nosources-source-map',
    mode: 'development',//用于构建模式 production和development
    
}

注意
采用此选项 你应该将你的 服务器配置为,不允许用户访问source map 文件 

6.Source Map的最佳实践

开发环境下
    建议把devtool的值设置为eval-source-map
    好处:可以精确定位到具体的错误行

生产环境下
    建议关闭Source Map或将devtool的值设置为nosources-source-map
    好处:防止源码泄露 提高网站的安全性

实际开发中需要自己配置webpack嘛

思考:
不需要
实际开发中会使命令行工具(CLI)一键生成带有webpack的项目

开箱即用 所有webpack配置项都是现成的
只需要知道webpack基本概念