这是sylu计算机协会第一次技术征文活动

前端工程化的概念

前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化；企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。

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

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

webpack 是目前主流的前端工程解决方案，关于 webpack 的介绍与简单使用可以查看这里，也可以点击查看官网；以上是对前端工程化知识的补充，接下来是对本人常用的webpack插件使用方法的分享及对loader加载器的些许理解的分享。

一、配置常用的插件：

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

（1）插件 webpack-dev-server

功能：每当修改了源代码，使 webpack 自动进行项目的打包和构建。

安装： npm install webpack-dev-server@4.9.0 -D

安装完成后，可在 package.json 文件的 devDependencies 节点中查看配置及版本号，若未写@4.9.0，默认安装当前最新版本。

基本使用：

（1）修放 package.json 文件的 scripts 节点的命令，例如：

"scripts":{
    "dev":"webpack serve"
}

（2）再次在终端运行 npm run dev 命令，重新进行项目的打包；
（3）在浏览器中访问 http://localhost::8080 地址，查看自动打包效果。

配置功能：

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，例如：

devServer:{
    open: true,  //设置打包完成后，自动打开浏览器
    host: '127.0.0.1',  //自定义打包所使用的主机地址
    port: 8080,  //自定义打包所使用的端口号
}

注意：修改了 webpack.config.js 或 package.json 配置文件后，须重启打包的服务器，该配置修改才能生效。

（2）插件 html-webpack-plugin

功能：webpack 中的 HTML 插件，可以通过此插件自由定制 index.html 页面的内容，即定制打包后打开的主页面显示的内容。

安装： npm install html-webpack-plugin@5.5.0 -D
配置功能：

//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',
    //3.通过plugins节点，使htmlPlugin插件生效
    plugins:[htmlPlugin]
}

配置好以上内容后，当你直接打开 http://localhost::8080 地址（或者打开你用上一个插件自定义的地址）时，它会直接将 src 目录中的 index.html 呈现出来，相当于给当前地址访问目录的最外层创建了一个 index.html 文件。

二、了解实用的loader：

loader加载器是 webpack 专门用于对模块的源代码进行转换的工具，loader 可以使你在 import 或"加载"模块时预处理文件。

作用：协助 webpack 打包处理特定的文件模块；loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，甚至允许你直接在 JavaScript 模块中 import CSS文件。

在实际开发过程中，webpack默认只能打包处理以js后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用loader加载器才可以正常打包，因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。
例如：

css-loader 可以打包处理 .css 相关的文件，⽀持模块化、压缩、⽂件导⼊等特性;
style-loader 可以把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS；
less-loader 可以打包处理 .less 相关的文件；
babel-loader 可以打包处理 webpack 无法处理的高级 js 语法，将ES6转化为ES5；
file-loader 可以把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件；
url-loader 其功能和 file-loader 类似，但是它能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去；
source-map-loader 可以加载额外的 Source Map ⽂件，以⽅便断点调试；
image-loader 可以打包并且压缩图⽚⽂件；
eslint-loader 可以通过 ESLint 检查 JavaScript 代码；
......

因此，webpack中的loader加载器对实现前端工程化有极大的帮助，我们可以去深入了解和使用一番，更多具体的描述可以查看官网。

后记：

本篇笔记补充了本人对前端工程化的一些理解，粗略地介绍了webpack中非常重要的loader加载器，并推荐了本人常用的两个webpack插件及使用方法；随着本人更加深入地学习，这些loader加载器的具体使用会在后续的学习笔记中呈现。（欢迎有疑问的朋友们在评论区展开讨论，也欢迎大佬们对本文的不足之处和错误理解加以指正）

webpack学习笔记 —— 常用插件与loader

前端工程化的概念

一、配置常用的插件：

（1）插件 webpack-dev-server

（2）插件 html-webpack-plugin

二、了解实用的loader：

后记：