[JavaScript知识库]vue-cli

前端工程化指的是？

在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的”四个现代化”

四个现代化是什么？

模块化、组件化、规范化和自动化

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

webpack和parcel

webpack的主要功能是？

提供友好的前端模块化开发，以及代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化等强大功能

好处：把工作的重心集中到具体功能实现上，提高前端开发效率以及项目的可维护性。

实现步骤：

在根目录终端中输入npm init -y 目的：初始化包管理文件（注意所在位置文件夹名不能包含中文），这个操作是初始化package.json

新建目录src，程序员所写的代码一定要放到src之下

下载jquery操作文本 npm i jquery -s

由于使用ES6运行jquery在浏览器中会有兼容性的问题，所以使用webpack

在终端安装 npm install webpack@5.5.1 webpack-cli@4.3.0?-D（cli要下载最新版本）

配置webpack

webpack.config.js是webpack的配置文件，基于node.js开发出来的打包工具，在打包之前会先读取这个配置文件，基于配置进行打包

①在根目录下，创建webpack.config.js的webpack配置文件，初始化基本配置：

modult.exports={

?mode:’development’//mode 用来指定构建模式，可以有development和production 在开发阶段一般都是development,上线时production

}

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

把scripts中的修改成”dev”:”webpack” //script 节点下的脚本，可以通过npm run执行，例如 npm run dev

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

mode节点中两个可选值的区别是什么？

①development

开发环境

不会对打包生成的文件进行代码压缩和性能优化

打包速度快，适合开发阶段

②production

生产环境

会对打包生成的文件进行代码压缩和性能优化

打包速度慢，仅适合发布阶段

webpack的默认约定

①默认打包入口文件为src->index.js

②默认输出文件路径是dist->main.js

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

const?path=require('path')

module.exports=

{

? ? // 指定打包的入口

? ? entry:path.join(__dirname,'./src/index.js'),

? ? output:

? ? {

? ? ? ? //输出文件的存放路径

? ? ? ? path:path.join(__dirname,'./dist'),

? ? ? ? //输出文件的名称

? ? ? ? filename:'bundle.js'

? ? },

? ? mode:'development'

}

注意：每次修改都要打包才能实现 npm run dev

由于每次修改都要去打包所以使用安装webpack插件

最常用的webpack插件如下：

webpack-dev-server

node.js阶段用到nodemon工具

每当修改源代码、webpack会监听项目源代码的变化，从而自动进行打包和构建

运行命令：npm install(或者i) webpack-dev-server@3.11.0?-D（注意1：一般要安装最新版本

npm i webpack -cli）

html-webpack-plugin plugin插件意思

webpack中的HTML插件（类似于一个模板引擎插件）

可以通过此插件自定制index.html页面的内容

如何配置webpack-dev-server

修改package.json->scripts中dev命令：

在原本webpack命令后加上serve，即：”dev”:”webpack serve”

再次运行npm run dev就会自动打包

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

webpack-dev-server启动一个实时打包http服务器

注意2：使用ctrl+点击 无法打开准确网址，会报错（Cannot GET/）

在webpack.config.js中添加如下代码

devServer:

{

static{directory:path.join(__dirname,’/’),},

}

打开后还是没有变化是因为没有放到实际物理磁盘而是在内存中，不是实时打包的文件

实时打包的文件没有放到dist/bundle.js文件中，其中的是旧文件所以读取不对

作用：

不在根据output节点指定的路径，存放到实际的物理磁盘上

提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

生成到内存中的文件该如何访问呢？ ?webpack-dev-server

webpack-dev-server生成内存文件，默认放到项目根目录中，虚拟、不可见的

引用使用：?<script?src="/bundle.js"></script> //因为放在根目录下面生成（内存） 不可见/虚拟的

如何配置html-webpack-plugin

需求：通过html-webpack-plugin插件，将src目录下index.html首页，复制到项目根目录中一份（在实时监听下退出按两次ctrl+c）

安装插件npm install html-webpack-plugin@4.5.0?-D（下载最新版本，不要下载这个版本）

卸载插件npm uninstall xx

配置html-wenpack-plugin

在wepack-config.js中

①const HtmlPlugin=require(‘html-webpack-plugin’);//获取构造函数

②const htmlPlugin=new HtmlPlugin({//创建HTML插件的实例对象

template:’./src/index.html’,//指定源文件的存放位置

filename:’./index.html’,//指定生成问价的存放位置

})

在module.exports={

plugins:[htmlPlugin],

}

html-webpack-plugin的两个注意点

①文件被复制到项目根目录中，内存里面

②生成的index.html页面的底部，自动注入打包的bundle.js文件（前面的就不用引入，会自动生成，删除dist文件夹不会影响正常运行）

devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多配置

例如：

devServer:{

open:true,//初次打包完成，自动打开浏览器

host:’127.0.0.1’,//实时打包所使用的主机地址

port:80,//实时打包使用的端口号

}

webpack中的loader

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

作用：协助webpack打包处理特定的文件模块

css-loader 打包处理.css相关的文件

less-loader 打包处理.less相关的文件

babel-loader 打包处理webpack无法处理的高级JS语法

注意3：在webpack中一切皆为模块，.css,.less,图片都可以根据import进行导入，导入后可以正常生效

但是因为在js中还没有loader可以处理css后缀的文件所以会报错

安装loader

npm i style-loader css-loader -D

配置loader

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

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

rules:[{//文件后缀名的匹配规则

test:/\.css$/,use:[‘style-loader’,’css-loader’]//test表示文件匹配类型（正则表达式，意思是以css结尾的文件都使用css-loader或style-loader运行）

},{ ?????????????????????}

//还有对象就{ ????}放里面

]

}

style.loader ??css.loader

注意：use数组中loader顺序固定的，多个loader的调用顺序：从后往前调用（要不然会报错）并且修改了配置文件都要重启打包

打包处理less文件

在js中引入less import’./css/index.less’

安装less-loader

npm i less-loader less -D

Webpack.config.js的module->rules数组，添加loader规则

如上而在rules数组中通再添加一条规则

test:/\.less$/,use:[‘style-loader’,’css-loader’,’less-loader’]

注意4：在rules数组中的对象需要{}包裹每一条test对象

打包处理样式表中url路劲相关的文件

打包图片怎么进行压缩混淆呢？

直接写url没有报错，版本不同的原因

不过还是要安装url-loader插件

npm i url-loader file-loader -D

在rules中写入

{test:/\.jpg|png|gif$/,use:’url-loader?limit=22229’}

//limit参数 ?表示要传参，limit指的是图片的体积<=22229才会被转成参数项

limit用来指定图片的大小，单位是字节（byte）

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

第一种失效

loader的另一种配置 第二种方法

use:{

loader:’url-loader’,//通过loader属性指定要调用loader

options:{ limit:22229}

}

第二种失效

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

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

class Person{

//通过static关键字，为Person类定义一个静态属性info

//webpack 无法打包处理“静态属性”这个高级语法

?static info=’person info’

}

console.log(Person.info);

没有报错，新版本也兼容了这个问题

但是还是要安装babel-loader包

npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D

失效

打包发布

项目开发完成后需要使用webpack对项目进行打包发布的原因:

①开发环境下，打包生成的文件存放到内存中，无法获取最终打包生成的文件，无法上线

②开发环境下，打包生成的文件不会进行代码压缩混淆和性能优化

怎么进行配置？

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

添加”build”:”webpack --mode production”//项目发布时，运行build命令

--mode是一个参数项，用来指定webpack运行模式，production代表生成环境，会对打包生成的代码压缩和性能优化

注意5：通过 --node指定的参数项，会覆盖webpack.config.js中的module选项

执行npm run build // 就进行了代码压缩混淆构建，但是dist文件夹下的文件存放比较杂乱所以需要整理

①javascript文件统一生成在js目录中

修改output中filename:’js/bundle.js’//统一生成在dist文件夹下的js子目录中

注意6：每次打包不会把旧文件清除掉，每次打包前手动清除dist目录

那么如何清除dist目录下的旧文件呢？

安装clean-webpack-plugin

导入const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’)

const cleanPlugin=new CleanWebpackPlugin()

//挂载到plugins节点中

plugin:{htmlPlugin,cleanPlugin},//挂载插件

②把图片统一生成到image目录中

在图片中新增outputPath:’image’

企业级打包发布：

①生成打包报告，根据具体报告分析具体的优化方案

②Tree-Shaking

③为第三方库启用CDN加载

④配置组件的按需加载

⑤开启路由懒加载

⑥自定制首页内容

生成环境遇到的问题：（生产环境会遇到什么问题）

压缩混淆代码后代码除错（debug）困难

①变量被替换成没有语义的名称

②空行和注释被剔除

使用source Map

Souce Mpa是一个信息文件，里面储存着位置信息，储存代码混淆前后的对应关系

出错时除错工具会直接显示原始代码，而不是转换后的代码，方便后期调试

开发环境下，webpack默认启用Source Map功能，在控制台直接显示错误行的位置，定义到具体的源代码

但是为什么会有行数偏差？

因为Sources Map默认是转换生成后的代码位置

如何解决行数偏差？

Webpack.config.js中配置添加devtool:’eval-source-map’

在生产环境下省略devtool选项，最终文件不包含Source Map防止原始代码以Source Map的形式暴露

可以把devtool设置为nosources-source-map只定位行数不泄露源代码，提高网址安全性

• 个人笔记，如有错漏之处，敬请指正