什么是前端工程化？
前端工程化，让前端开发更方便，更高效，更易于管理的一种方法。
通过使用构建工具（如Webpack、Gulp自动化处理一些繁琐的任务，比如代码压缩、文件合并、自动刷新等。
这样开发者可以专注于写代码，而不用手动处理这些重复的工作。
用盖房子🏠举例
假如你是一名建筑工人，你的工作是帮助设计师把一幢房屋建造出来。在建造房屋的过程中，你需要使用不同的工具和材料，比如锤子、钉子、刷子、油漆、墙砖等等。
在传统的建筑业中，你需要手动使用这些工具和材料来一步一步地建造房屋。但是，在现代化的建筑行业中，可能会有专门的机器和系统来辅助你完成这些工作：有可能有工程机械会代替你用锤子和钉子，有可能有喷漆机会代替你手动刷漆，有可能有互联网联系好了很多供应商，方便你直接购买各种材料等等。
同样地，前端工程化也是利用现代化的开发工具和流程规范化前端项目的开发流程。前端开发人员在编写代码时，可以使用工具和技术，比如webpack、gulp、npm、babel等来自动化完成代码构建、测试、部署等工作。这样，开发人员就可以更加轻松地开发和维护前端应用程序，提高开发效率，降低出错概率，并提升应用的质量、可维护性和可扩展性。
希望这个例子更好地理解什么是前端工程化。
webpack
Webpack 是一个模块打包工具，它将所有的静态资源（JavaScript、CSS、图片等）视为一个个模块，通过加载器和插件可以对这些静态资源进行打包、优化、压缩等处理，从而生成可部署的内容静态文件。
在使用Webpack时，我们需要进行基础配置，其中涉及到以下几点：
entry：入口
入口：指应用的起点，Webpack会从入口开始打包所有需要的模块。
output：出口
出口：指打包后生成的文件输出到哪里的路径，是一个字符串或者是一个对象，通常指定输出文件夹的路径和文件名。
alias：别名
别名：是指将特定的模块路径映射成一个新的路径，便于在代码中引用和使用。可以避免了路径过长的问题。
loader：依赖模块
loader：是解析模块内容的工具。Webpack中包含了一系列的内置的加载器，还有一些第三方的加载器，通过使用它们，我们可以将不同类型的资源文件（CSS、Less、Sass等）转换成Webpack可以处理的文件。
plugin ：插件
plugin：是插件，用于执行各种与打包相关的工作，例如代码压缩、资源注入、代码拆分等。
devServe ：本地服务
devServer：是Webpack自带的本地服务器，可用于快速开发、调试和测试应用程序。
实操配置
一、搭建webpack项目 
起步 | webpack 中文文档
二、管理资源文件 管理资源 | webpack 中文文档
三、配置 devServe 开发环境 | webpack 中文文档
打包之前清理上次的文件 管理输出 | webpack 中文文档
打包css 需要安装 style-loader 和 css-loader，并在 module配置 中添加这些 loader：
npm install --save-dev style-loader css-loader
// 默认下载的vue-loader 版本太高，需要降到14.1.1版本的 // 默认下载的 vue 模块 版本太高，需要降到 2.7.14
基础示例代码
配置 devServe 示例代码
打包图片、抽离 出css、img 文件
const path = require('path'); //path 模块应用文件相关操作 const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader') /**webpack 主要配置项 entry 入口文件 output 出口打包配置 modlue webpack 依赖 插件模块 plugins 配置依赖插件 **/ module.exports = { mode:"production", //production 生成模式 ；development 开发模式 entry: './src/main.js', // 入口文件 默认单入口文件 // entry 可以配置多入口 - 打包生成多个文件 // entry:{ // index:"./src/index.js", // app:"./src/app.js" // }, // 本地服务 devServer: { static: './dist', open:true, port: 9000, host:"127.0.0.1", hot:true, }, plugins: [ new HtmlWebpackPlugin({ template:'./public/index.html', // filename:"index.html", // title:"vue单文件" }),//插件(自动生成html，提取css，压缩css) // new VueLoaderPlugin() // 解下 vue ], // 多个js文件打包成一个js // entry:['./src/index.js','./src/app.js'], output: { // 出口配置 - 打包后生成的文件目录和文件 filename: '[name].js', // 打包生成的文件 path: path.resolve(__dirname, 'dist'),// 打包生成的目录 clean:true // 清空上一次打包文件 }, resolve:{//设置src的别名为@ alias:{ "@":path.resolve(__dirname,"src") } }, // webpack 依赖模块 module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, // 它会应用到普通的 `.js` 文件 // 以及 `.vue` 文件中的 `<script>` 块 { test: /\.js$/, loader: 'babel-loader' }, // 它会应用到普通的 `.css` 文件 // 以及 `.vue` 文件中的 `<style>` 块 { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, // style-loader 和 vue-style-loader 只能留一个 // { // test: /\.css$/i, // 配置打包css // use: ['style-loader', 'css-loader'], // }, { // 配置打包图片资源 test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, // 字体文件 { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, ], }, };
注意事项
sourceMap ：跟踪代码报错
安装vue2版本，配置sourceMap 需要将 css-loader 版本降到 2.0 ，否则打包运行异常报错
npm i css-loader@2
