详解前端工程化

最新推荐文章于 2024-06-06 08:03:55 发布

旧味清欢|

最新推荐文章于 2024-06-06 08:03:55 发布

阅读量717

点赞数

分类专栏： webpack 文章标签：前端 vue.js webpack

本文链接：https://blog.csdn.net/w1404273025/article/details/125984131

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端工程化

(一)、什么是前端工程化

工作内容，将设计稿切图转成静态页面，然后用 jQuery 插件实现一些页面的轮播图、跑马灯等交互效果。最后使用后端的模板语言如 smart、velocity 等将静态页面添加页面逻辑，代码交给服务端同学完成上线。整个过程中，JS 框架以 jQuery 为主，CSS 顶多用一下 Less。
前端工作方式。前端的开发框架以 Vue 为主，使用 Webpack 解决接口 mock、代码检查、代码编译、构建、压缩、添加版本号、部署等全流程的工作。涉及到的技术点有 Vue、Vuex、ESlint、stylelint、mock、Webpack、Sass、PostCSS 等。对前端的要求变成了更多工程化为主的问题。
一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化

(二)、前端工程化的优点：

极大提升开发效率：
- 绑定事件：
```
//js
document.getElementById('myDom').addEventListener('click', function(e){
    // do some thing
})

//jquery
$('#myDom').click(function(){
    // do some thing
})

//vue
<div @click="doSomething">
</div>
methods: {
  doSomething: function () {
    // do some thing
  }
}
```
- 没有前端脚手架的情况下，如果从零开发一个项目，需要花费大量的时间去初始化项目，比如安装各种 npm 包、配置各种 Webpack 的 loader、配置热加载。如果碰到环境搭建不顺利的情况，还需要花费很长时间去排查问题，单单一个项目初始化的动作就足以耗费一两天的时间。有脚手架工具的情况下，只需要简单的一个初始化命令，2 分钟的时间就可以完成项目的初始化。前端只需要聚焦到业务开发本身，效率大幅提升。
降低大型项目的开发难度：
- 首先前端工程化中提倡模块化、组件化。模块化的思想将大型项目的功能进行分解，分拆成一个个独立的模块。每个模块的开发难度直线下降。同时基于版本控制工具 Git，多个开发者可以并行开发，提升开发效率。项目在后期迭代的时候，由于每个模块相对独立，耦合性极低，一个功能的调整往往只需要修改其中的一个模块就可以，风险可控。不至于出现改动一处代码，引发全局问题的情况。
- 其次，前端工程化提倡用完善的流程规范和代码规范来保证大型应用的质量和可维护性。比如通过 ESlint、stylelint 对代码进行自动校验，通过评审、详细设计、开发、联调、测试、上线等每个环节的控制，确保项目的高质量和按时交付。流程规范确保了大型项目质量和可维护性的同时能够如期交付。
更易获得面试官青睐：

前端工程化是每个现代前端人应该必备的技能。

(三)、前端工程化解决方案：

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

grunt
gulp

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

webpack
parcel

(四)、webpack的概念:

webpack本质是, 一个第三方模块包, 用于识别代码, 翻译, 压缩, 整合打包，达到提高打开网站的速度的目的。

代码压缩
浏览器js的兼容性问题
性能的优化

(五)、安装与配置webpack

初始化package.json npm init -y
安装包：
```
npm  i  webpack  webpack-cli  -D
```
在项目根目录创建名为webpack.config.js 的webpack配置文件，并初始化如下基本项
```
module.exports={ 
    mode:"development"    //mode用来指定构建模式
}
```

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

"scripts":{
    "dev":"webpack"       //可以通过npm run执行，npm  run dev
}

在终端执行npm run dev 命令，启动webpack进行项目的打包

(六)、webpack的配置

webpack.config.js:

webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
入口：entry (指定要处理哪个文件)
- 默认值./src/index.js
- 自定义：entry: './path/to/my/entry/file.js'

输出：output (指定生成的文件要存放到哪里)

默认值：./dist/main.js

自定义：

 output: {
    path: path.join(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  }

plugins：插件的数组，将来webpack在运行时，会加载并调用这些插件

(七)、webpack中的插件

webpack-dev-server@3.11.0：
- 作用：类似nodemon，修改了源代码，webpack自动进行项目的打包与构建
- 安装插件：
```
npm i webpack-dev-server@3.11.0 -D
```
- 修改package.json中scripts中的dev命令
```
"scripts":{
    "dev":"webpack serve"      
}
```
- 运行npm run dev命令，重新进行项目的打包
- 在浏览器查看localhost:8080 查看打包效果
- devServer：
```
"devServer":{
    open:true,
    host:"localhost",
    port:8080
}
```

html-webpack-plugin:

作用：类似模板引擎，通过此插件自定义index.html页面内容
安装插件：
```
npm i html-webpack-plugin -D
```

导入插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

创建插件实例对象：

const htmlnewplugin = new HtmlWebpackPlugin({ 
    template: './src/index.html',
    filename:'./index.html'
}

使用插件：
```
plugins: [htmlnewplugin],
```