这是我参与「第四届青训营」笔记创作活动的的第5天

一、前端工程化

1.实际的前端开发：

●模块化(js的模块化、Css的模块化、资源的模块化)

●组件化（复用现有的Ui结构、样式、行为)

●规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）//易维护

●自动化（自动化构建、自动部署、自动化测试）

2.什么是前端工程化

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

●企业中的Vue项目和React项目，都是基于工程化的方式进行开发的。

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

3.前端工程化的解决方法

主流：

●Webpack

●parcel

二、webpack的使用

1.什么是webpack：

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

出现语法错误报错，原因：ES6高级语法，浏览器不兼容

故需要先转化为低级语法，可借助webpack的loader进行自动转化

3.项目中构建webpack打包环境：

1.下载安装webpack

npm i webpack -D

2.新建webpack.config.js配置文件

module.exports = {
    mode: 'development',
    
}

3.在npm的json文件中配置构建脚本

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

4.终端输人npm run dev命令，启动webpack打包程序

5.压缩文件：将mode改为生产模式production将对代码进行压缩

6.webpack.config.js文件的配置：

入口及出口设置：

entry：path.join(__dirname,'.src/index.js')//指定要处理哪个文件

output: {
        path: path.join(__dirname, './dist'),
        filename: 'bunble.js'
    }//设置打包的文件存在哪里

7.webpack常用的插件：

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

webpack插件有如下两个：

①webpack-dev-server @3.11.2 ●类似于node,js阶段用到的nodemon工具 ●每当修改了源代码，webpack会自动进行项目的打包和构建

配置webpack-dev-server

②html-webpack-plugin ●webpack中的HTML插件（类似于一个模板引擎插件） ●可以通过此插件自定制index.html页面的内容

安装：

   npm i html-webpack-plugin@5.3.2 -D

配置

导入HTML件，得到一个构造函数


const HtmlPlugin require('html-webpack-plugin')

创建HTML指件的实例对数

Plugins: {
        new HtmlWebpackPlugin({
            template: './src/index.html',//指定原文件的存放路径
            filename: './index.html'//指定生成的文件的存放路径
        })
    }

作用: