（一）前端工程化与webpack

一、前端工程化

• 模块化(js的模块化、css的模块化、资源的模块化）
• 组件化（复用现有的UI结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
• 自动化（自动化构建、自动部署、自动化测试）
  2.什么是前端工程化
  前端工程化指的是：在企业级的前端开发项目中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
  3.前端工程化的解决方案
  webpack
  parcel

二、webpack的基本使用

1.什么是webpack
概念：webpack是前端项目工程化的具体解决方案。
主要功能：提供了友好的前端模块化开发支持

2.创建列表隔行变色项目
3.在项目中安装webpack

 在终端运行 webpack@5.42.1 webpack-cli@4.7.2 -D

-S是–save的简写
-D是–save-dev的简写
4.在项目中配置webpack
(1)在根目录中，创建名为webpack.config.js的webpack配置文件

 module.exports={
    mode:'development'
}

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

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

(3)在终端
运行npm run dev
自动生成dist文件夹和main.js文件，引入main.js即可
== 注意：每次修改index.js都需要重新运行npm run dev进行重新处理==

👉webpack.config.js文件的作用
webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
👉webpack中的默认约定
（1）默认的打包入口文件为src->index.js
（2）默认的输出文件路径为dist->main.js
注意：可以在webpack.config.js中修改的打包的默认约定
👉自定义打包的入口和出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。

 const path = require('path')
module.exports = {
    //开发用development追求打包速度
    mode: 'development',
    entry:path.join(__dirname,'./src/index1.js'),
    output:{
        //存放目录
        path:path.join(__dirname,'dist'),
        filename: 'bundle.js'
    }
}

<!-- <script src="../dist/main.js"></script> -->
    <script src="../dist/bundle.js"></script>

问题：修改index.js需要重新npm run dev才可以生效

三、webpack中的插件

1.插件使用
（1）webpack-dev-server
类似于nonde.js的nodemon
每当修改了源代码，webpack会自动进行项目的打包和构建
html-webpack-plugin
webpack中的HTML插件，类似于一个模板引擎插件
可以通过此插件自定制index.html
2.安装

npm install webpack-dev-server@3.11.2 -D

配置
（1）修改