一.前端工程化

1.实际的前端开发：

（1）模块化：js的模块化，css的模块化，其他资源的模块化
（2）组件化：复用现有的UI结构，样式，行为
（3）规范化：目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理
（4）自动化：自动化构建，自动部署，自动化测试

2.前端工程化：

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

  • 让前端开发自成体系，覆盖了前端开发从创建到部署的方方面面

  • 最大程度的提高前端的开发效率，降低了技术选型，前后端联调等带来的协调沟通成本

    3.流行的前端工程化的解决方案

    （1）webpack
    （2）parcel

    二.webpack基础

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

    2.主要功能：

    （1）提供友好的前端模块化开发支持
    （2）解决代码压缩混淆
    （3）处理浏览器端JavaScript兼容性问题
    （4）性能优化
    （5）提高开发效率和项目的可维护性等

    3.基本使用

    （1）在项目中进入对应文件夹，终端输入：npm init -y命令，初始化包管理配置文件package.json
    image.png
    （2）新建src目录(源代码写进src内)
    （3）ES6很多语法有兼容性问题，就要用webpack打包处理
    （4）输入 npm install jquery -S 指令安装jQuery

    4.在项目中使用webpack：

    （1）安装两个包，终端输入：npm i webpack@5.5.1 webpack-cli@4.2.0 -D 指令

    5.在项目中配置webpack：

    （1）在项目根目录下，创建名为 webpack.config.js的webpack配置文件，并初始化如下的基本配置：

  • webpack.config.js文件：是webpack的配置文件，在打包时会先读取该配置文件，从而基于给定的配置，对项目进行打包

    1. module.exports = {
    2.  mode:'development'//mode 用于指定构建模式，可选值有development和production
    3. }
    4. //mode：development  -  开发环境，不会对打包文件进行代码压缩和性能优化，打包速度块，适合在开发阶段使用
    5. //mode：production   -   生产环境，会对打包文件进行代码压缩和性能优化，打包速度慢，只适合在发布阶段使用

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

  • scripts节点下的脚本，可以通过npm run执行

  • 设置该选项，npm run dev 就会执行webpack
  • 脚本名称是自己设定的，也可以叫dev123等

image.png
（3）终端输入npm run dev 指令，就会开始打包，生成dist文件夹，下边有一个main.js文件，就是处理好的没有兼容性的js文件，将其导入就可以实现了
image.png
（4）webpack的默认约定：

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

  • 可以在 webpack.config.js中修改默认的配置文件

    //通过entry节点指定打包的入口
//通过output节点指定打包的出口
const path = require('path')//导入node.js专门操作路径的模块
module.exports = {
entry:path.join(__dirname,'./src/index.js'),//打包入口文件
output:{
  path:path.join(__dirname,'./dist'),//打包出口文件
  filename:'bundle.js'//输出文件的名称
}
}

    三.webpack插件

    1.webpack-dev-server

    （1）功能：每当修改代码，webpack就会自动对项目进行打包和构建
    （2）安装：输入 npm install webpack-dev-server@3.11.0 -D 指令
    （3）配置：修改package.json中scripts节点下的dev命令为”webpack serve”
    image.png
    （4）终端输入 npm run dev即可开始自动打包服务
    （5）webpack-dev-server会启动一个实时打包的http服务器，在浏览器访问 http://localhost:8080地址，查看自动打包效果，但是8080端口打开的是项目的根目录,点击src才会看到首页
    image.png
    修改样式会自动打包，但是应用不到首页上，因为配置了webpack-dev-server后，打包生成的文件存放到了内存，不在根据指定的路径，提高了性能，生成到内存的文件默认放到项目的根目录，而且是虚拟的，不可见的
    就要将script标签引入的路径改为”/bundle.js”,这样再点击scr就可以看见效果改变了
    image.png

  • 但是输入npm run dev指令报错：原因是版本太老了，输入 npm install webpack-cli -D指令升级一个版本

image.png

2.html-webpack-plugin

（1）功能：类似于模板引擎插件，通过此插件可以自定制index.html页面的内容
（2）通过该插件可以将src目录下的index.html首页复制一份放到根目录，就可以实现访问端口号就看见首页，不用再点src目录
（3）安装：输入 npm install html-webpack-plugin@4.5.0 -D 指令
（4）配置：在webpack.config.js 配置文件中配置如下内容

//1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template:'./src/index.html',//指定原文件的存放路径
  filename:'./index.html',//指定生成的文件的存放路径
})

module.exports = {
  mode:'development',
  plugins:[htmlPlugin],//通过plugin节点，是html-Plugin插件生效
}

（5）注意点：

  • 复制的页面也被放到内存中
  • 插件在生成的index.html页面的底部，会自动注入打包的bundle.js文件，就不用自己引入了

  • 即使删除了dist目录，也没影响

    3.devServer节点(不是插件)

    （1）不是插件，是对webpack-dev-server插件进行更多的配置
    （2）添加devServer节点，进入webpack.config.js 配置文件继续添加节点

    devServer:{
open:true,//初次打包完成，自动打开浏览器
host:'127.0.0.1',//实时打包所使用的打包地址
port:80//实时打包所使用的端口号
}

    （3）更改配置信息后，记得重启服务才会生效

    四.loader加载器

    1.loader概述：

    （1）实际开发中，webpack默认只能打包处理.js结尾的模块，其他需要loader加载器才可以正常打包

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

    （1）css-loader：可以打包处理.css相关文件
    （2）less-loader：可以打包处理.less相关文件
    （3）babel-loader：可以打包处理webpack无法处理的高级js语法

    3.配置：

    （1）输入 npm i style-loader@2.0.0 css-loader@5.0.1 -D 指令，安装处理css文件的loader
    （2）输入 npm i less-loader@7.1.0 less@3.12.2 -D 指令，安装处理less文件的loader
    （3）输入 npm i url-loader@4.1.1 file-loader@6.2.0 -D 指令，安装处理带有url文件的loader
    （4）输入 npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D 指令，安装处理带有高级语法的loader，例如对象等

  • 注意，在需要时引进，暂时不需要，浏览器都能解读

（5）进入webpack.config.js的module->rules数组中，添加loader规则

rules:[
    {test:/\.css$/,use:['style-loader','css-loader']},//test代表文件类型，use表示对应调用的loader
    {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
    {test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}//表示图片大小<=limit才会被转为base64格式
]
//另一种写法：让use指向对象
rules:[
    {test:/\.css$/,use:['style-loader','css-loader']},//test代表文件类型，use表示对应调用的loader
    {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
    {test:/\.jpg|png|gif$/,
    use:{
        loader:'url-loader',
        options:{
            limit:22229
        }
    }},//表示图片大小<=limit才会被转为base64格式
  {
    test:/\.js$/,
    exclude:/node_modules/   //表示排除,也就是不转换这个文件夹
    use:{
      loader:'babel-loader',
      options:{
        plugins:['@babel/plugin-proposal-class-properties']
      }
    }
  }
]

五.项目的打包发布

1.需要打包的原因：

（1）开发环境下，打包生成的文件存放在内存中，无法获取最终打包生成的文件，所以无法进行上线部署
（2）开发环境下，打包生成的文件不会进行代码压缩和性能优化
（3）所以打包发布就是为了获取到文件，以及代码压缩和性能优化

2.配置webpack的打包发布：

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

"scripts": {
  "dev": "webpack serve",
  "build":"webpack --mode production"
}
  • —mode：是一个参数项，用来指定webpack的运行模式
  • 通过—mode 指定的选项，会覆盖 webpack.config.js 中的 mode 选项
  • 打包后会自动生成一个dist文件夹，里面就是打包好的项目

（2）项目打包好了，但是目录乱

  • 所以就要在webpack.config.js配置文件的output节点中进行如下配置

    output: {
      path: path.join(__dirname, './dist'),//打包出口文件
      filename: 'js/bundle.js'//将.js文件都放到js文件夹
  }

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

    {
  test: /\.jpg|png|gif$/,
  use: {
      loader: 'url-loader',
      options: {
          limit: 400000,
          outputPath:'image'//在原有的基础上配置
      }
  }
}

    （3）每次打包并不会将旧文件替换，所以每次打包之前都手动删除一下，若想实现自动清理，安装插件clean-webpack-plugin插件

  • 输入 npm install clean-webpack-plugin@3.0.0 -D 指令来安装

  • 配置：打开webpack.config.js进行配置

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

    六.Source Map

    1.生产环境遇到的问题：

    （1）前端项目在投入生产环境前，都需要对JS代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率，也就产生了一个问题：对压缩混淆后的代码除错非常困难

  • 变量被替换成没有任何语义的名称

  • 空行和注释都被剔除

    2.Source Map

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

    3.开发环境下的Source Map

    （1）开发环境下，webpack默认启用Source Map功能。
    （2）当程序出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码
    （3）默认生成的Source Map，记录的是生成后的代码位置，会导致错误的行数与开发人员写的行数不一致
    （4）解决办法：在webpack.config.js文件添加配置，即可保证报错的行数与源代码行数一致

    module.exports = {
  mode: 'development',
  devtool:'eval-source-map'//保证报错的行数与源代码行数一致，仅限开发模式
//省略其他配置
}

    4.生产环境下的Source Map

    （1）生产环境下，省略devtool选项则最终生成的文件中不包含Source Map。
    （2）这样能够防止源代码通过Source Map的形式暴漏给别有所图之人
    （3）非常安全，但是非常不方便调试
    （4）所以就有了新方法：只给出行数，不暴漏代码

  • 将devtool的值改为：nosources-source-map

    module.exports = {
  mode: 'development',
  devtool:'nosources-source-map'//报错只提示行数
//还可以将其设置为source-map，这样显示定位，且点击会直接暴漏源代码，不推荐使用
//省略其他配置
}