一.前端开发

模块化：js模块化，css模块化，资源模块化
组件化：复用UI结构样式
规范化：目录结构划分，编码规范化，接口规范化，文档规范化，git分支管理
自动化：自动化构建，自动部署，自动化测试

1.前端工程化

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

2.前端工程化解决方案

webpack和parcel

二.webpack

前端项目工程化集体解决方案。主要功能：支持前端模块化开发，代码压缩混淆，处理浏览器端JavaScript兼容性，性能优化。

在webpack中，一切皆模块化，都可以通过es6导入语法进行导入和使用（导入jquery,css，less文件，图片）如果某个模块中，使用from接收到的成员是undefined,则没必要进行接收。（css,less等文件）

1.基础使用

隔行变色案例：

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

2.在项目中安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D   
（-D 开发依赖（上线时不需要使用）-D是--save-dev的简写）

3.在项目中配置webpack

1. webpack.config.js （webpack配置文件）

module.export={
    mode:'development'   
    //mode指构建模式，development（开发阶段）或production（生产模式）
}

webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。由于webpack 是基于node.js 开发出来的打包工具，因此在它的配置文件中，支持使用node.js 相关的语法和模块进行webpack 的个性化配置。 mode 节点的可选值有两个：

development 开发环境不会对打包生成的文件进行代码压缩和性能优化，体积较大打包速度快，适合在开发阶段使用
production 生产环境会对打包生成的文件进行代码压缩和性能优化，体积小打包速度很慢，仅适合在项目发布阶段使用

开发阶段使用development（打包速度快，但是体积大），发布上线时使用production（打包时会进行代码压缩和混淆，发布体积小，但是打包速度慢）

2. 在package.json 的scripts 节点下，新增dev 脚本如下：

"scripts": {
    "dev":"webpack"  //script下的脚本可以通过npm run 执行，如npm run dev （执行webpack命令）
  },

3. 在终端运行npm run dev 命令，启动webpack进行项目打包构建 命令运行时先读取webpack.config.js配置文件，为development还是production，根据配置文件运行webpack。

> webpack
asset main.js 88.3 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
cacheable modules 282 KiB
  ./src/index.js 563 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]

执行结束后，跟目录中会出现dist文件夹，./src/index.js和 ./node_modules/jquery/dist/jquery.js 中的代码打包在main.js文件中。打包后index.html中script标签中应该引入main.js文件。

webpack 中的默认约定 在webpack 4.x 和5.x 的版本中，有如下的默认约定： ①默认的打包入口文件为src-> index.js ②默认的输出文件路径为dist -> main.js 注意：可以在webpack.config.js 中修改打包的默认约定

4. 自定义打包的入口和出口 webpack.config.js 配置文件，通过entry 节点指定打包的入口。通过output 节点指定打包的出口。

	const path=require('path')
	//使用node.js导出语法，向外导出一个webpack的配置对象
	module.export={
	    //代表webpack运行模式，可选值为development和production
	    mode:'production',
	    // entry:'指定要处理哪个文件'
	    entry:Path2D.join(__dirname,'./src/index1.js'),
	    //output指定生成的文件要存放到哪里
	    output:{
	        //存放到目录
	        path:path.join(__dirname,'dist'),
	        //生成文件名
	        filename:'bundle.js'
	    }
	}

使用webpack打包后，每次修改代码网页中不能直接刷新效果，而是需要在终端中npm run dev重新运行webpack（更新dist文件夹）网页才能刷新出效果。

三.webpack插件

1.webpack-dev-server

实时自动打包，监听项目源代码的变化，修改代码保存后会识别自动打包。

安装webpack-dev-server：

npm install webpack-dev-server@3.11.2-D

配置webpack-dev-server：

修改package.json中scripts中的dev命令

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

再次运行npm run dev命令，重新进行项目打包在浏览器中访问http://localhost:8080 地址，查看自动打包效果，会将项目打包文件保存到内存中。进入文件目录点击src会进入index首页。

注意：webpack-dev-server 会启动一个实时打包的http 服务器

2.html-webpack-plugin

html-webpack-plugin 是webpack 中的HTML 插件，可以通过此插件自定制index.html 页面的内容。

通过html-webpack-plugin 插件，将src 目录下的index.html 首页，复制到项目根目录中一份

安装html-webpack-plugin插件

npm install html-webpack-plugin@5.3.2 -D

配置html-webpack-plugin插件

webpack.config.js

//导入html-webpack-plugin插件，得到插件的构造函数
const HtmlPlugin=require('html-webpack-plugin')
//new构造函数，创建插件的实例对象
const htmlPlugin =new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})
module.exports = {
    mode: 'development',
    //插件的数组，将来webpack运行时会加载调用这些插件
    plugins:[htmlPlugin] ，//通过plugin节点，使htmlPlugin插件生效
};

通过HTML 插件复制到项目根目录中的index.html 页面，也被放到了内存中。 HTML 插件在生成的index.html 页面，自动注入了打包的bundle.js 文件，就不需要在index.html中手动引入bundle.js文件。

3.devServer节点

webpack.config.js 配置文件，通过devServer节点配置

devServer：{
//首次打包成功后，自动打开浏览器地址
open:true, 
//在http协议中，如果端口号为80，则可以省略（localhost）
port:80;
//在指定运行的主机地址
host:'127.0.0.1'
}

四.webpack 加载器loader

1.loader 概述

在实际开发过程中，webpack 默认只能打包处理以.js 后缀名结尾的模块。

其他非.js 后缀名结尾的模块，webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助webpack 打包处理特定的文件模块。 css-loader 可以打包处理.css 相关的文件 less-loader 可以打包处理.less 相关的文件 babel-loader 可以打包处理webpack 无法处理的高级JS 语法

loader调用过程 QQ图片20211209002514.png

2.解析处理css文件

安装：

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

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

module:{
    rules:[
     {test:/\.css$/,use:['style-loader','css-loader']}
     ]
}

test表示匹配的文件类型，use表示对应要调用的loader 注意： use数组中指定的loader顺序是固定的，多个loader的调用顺序是从后往前调用

1.webpack默认只能处理js结尾的文件，处理不了其他后缀的文件 2.由于代码中包含index.css文件，webpack默认处理不了 3.当webpack处理不了时，会查找webpack.config.js这个配置文件，查看module中rules数组中是否配置了对应的loader加载器 4.webpack把index.css文件先转交给loader进行处理 5.先交给css-loader处理（数组中loader从后往前），处理完毕的结果转交给前一个loader（style-loader） 6.style-loader处理完毕后转交给前一个loader，没有loader，则转交给webpack 7.webpack把style-loader处理的结果和并到/dist/bundle.js中，最终胜出打包好的文件

3.解析处理less文件

安装：

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

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

module:{//所有第三方文件模块的匹配规则

rules:[ //定义了不同模块对应的loader

{test:/.less$/,use:['style-loader','css-loader','less-loader']} ] }

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

使用base64格式字符串，不用再单独发起网络请求。图片转为base64后，体积会增加，不建议把大图转base64。

import img from ‘./img.jpg’ 导入的该图片为base64的字符串 js中导入图片时，会出错（不是js文件）

安装：

npm i url-loader@4.1.1 file-loader@6.2.0 -D

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

module:{
 rules:[
     //当只有一个loader时，use后面可以不使用数组，直接写为字符串
     {test:/\.jpg|png|gifs$/,use:'url-loader?limit=22229'}
 ]
}

其中?之后的是loader 的参数项： limit 用来指定图片的大小，单位是字节（byte）只有≤ limit 大小的图片，才会被转为base64 格式的图片

5.打包处理js文件中的高级语法

webpack 只能打包处理一部分高级的JavaScript 语法。对于那些webpack 无法处理的高级js 语法，需要借助于babel-loader进行打包处理。

安装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 规则如下：

module:{//所有第三方文件模块的匹配规则

rules:[ //定义了不同模块对应的loader //在配置babel-loader的时候，程序员只需要把自己的代码进行转换即可，一定要排除node_modules目录中的js文件，第三方包中的js兼容性不需要程序员关心

{test:/.js$/,use:'babel-loader',exclude: /node_modules/} ] } 配置babel-loader：在项目根目录下，创建名为babel.config.js 的配置文件，定义Babel 的配置项如下：

module.exports={
    //声明可用的插件
    //将来webpack在调用babel-loader时，会先加载plugin插件
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

五.打包发布

1.为什么要打包发布

项目开发完成之后，需要使用webpack 对项目进行打包发布，主要原因有以下两点： ①开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件 ②开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

2.配置webpack 的打包发布

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

"scripts": {
    "dev": "webpack serve",//开发环境中，运行dev命令（生成文件在内存中）
    "build":"webpack --mode production" //项目发布时，运行build命令（生成文件在物理磁盘上（dist文件夹））
  },

--mode 是一个参数项，用来指定webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。注意：通过--mode 指定的参数项，会覆盖webpack.config.js 中的mode 选项。

npm run build 命令进行打包发布

3.把JavaScript文件统一生成到js目录中

在webpack.config.js 配置文件的output节点中，进行如下的配置：

output:{

//存放到目录 path:path.join(__dirname,'dist'), //生成文件名 //明确告诉webpack把生成的bundle.js文件存放到dist目录的js子目录中 filename:'js/bundle.js' }

4.把图片文件统一生成到image目录中

修改webpack.config.js 中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：

module:{
     rules:[
         //当只有一个loader时，use后面可以不使用数组，直接写为字符串
         //在配置url-loader时，多个参数之间使用&符号进行分隔，outputPath设置打包后的图片放置的目录
         {test:/\.jpg|png|gifs$/,use:'url-loader?limit=22229&outputPath=images'}
     ]
    }

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

clean-webpack-plugin插件

安装：

npm install --save-dev clean-webpack-plugin

配置： webpack.config.js

//按需导入插件，得到插件的构造函数之后，创建插件的实例对象
const {CleanWebpackPlugin}=require('clea-webpack-plugin')
const claenPlugin=new CleanWebpackPlugin()
//把创建的cleanPlugin插件实例对象，挂载到plugin节点中。
plugins:[htmlPlugin,cleanPlugin],//挂载插件

六。Source Map

生产环境遇到的问题：

前端项目在投入生产环境之前，都需要对JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情。空格和注释被剔除；变量被替换为没有任何语义的名称。

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

在开发环境下，webpack 默认启用了Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码。

开发环境下

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

module.exports = {
  //在开发调试阶段，建议大家都把devtool的值设置为eval-source-map，报错行数和源代码行数相同
    devtool:'eval-source-map',
  //在实际发布的时候，建议将devtool的值设置为nosources-source-map，只定位报错的具体行数，且不暴露源码
    devtool:'nosources-source-map'
  //实际发布时，定位报错行号时，展示具体报错源码，不建议使用
    devtool:'source-map'
}

在生产环境下

如果省略了devtool 选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露给别有所图之人；

如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map；

如果想在定位报错行数的同时，展示具体报错的源码。此时可以将devtool的值设置为source-map。

采用此选项后：你应该将你的服务器配置为，不允许普通用户访问source map 文件！

七.webpack中@

使用@代表src源代码目录

配置：

webpack.config.js

resolve:{
  alisa:{
    //告诉webpack, @ 代表src目录
    '@':path.join(__dirname,'./src/')
}

前端工程化和webpack

一.前端开发

1.前端工程化

2.前端工程化解决方案

二.webpack

1.基础使用

2.在项目中安装webpack

3.在项目中配置webpack

三.webpack插件

1.webpack-dev-server

2.html-webpack-plugin

3.devServer节点

四.webpack 加载器loader

1.loader 概述

2.解析处理css文件

3.解析处理less文件

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

5.打包处理js文件中的高级语法

五.打包发布

1.为什么要打包发布

2.配置webpack 的打包发布

3.把JavaScript文件统一生成到js目录中

4.把图片文件统一生成到image目录中

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

六。Source Map

七.webpack中@