前端工程化与 webpack

目录

01.前端工程化的相关概念

02.Webpack 的常见用法

03.打包发布

04.Source Map

---

01.前端工程化的相关概念

【紧紧抓住四个特性：模块化/组件化/规范化/自动化

• 早期的前端工程化解决方案
  • grunt ( Grunt: JavaScript 世界的构建工具 | Grunt 中文网 )
  • gulp ( https://www.gulpjs.com.cn/)
• 目前主流的前端工程化解决方案
  • webpack(webpack | webpack 中文文档 | webpack 中文网
  • parce! ( Parcel 中文网 )

02.Webpack 的常见用法

【插件1：webpack+ webpack-cli+webpack-dev-server】 

【使用步骤】

01.初始化项目新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json

02.新建src 源代码目录         

03.新建 src-> index.html 首页和 src -> index.js 脚本文件

04.初始化首页基本的结构

05.运行 npm install jquery -S 命令，安装jQuery.v

-S实际上就是--save，那么-S和-D有什么区别呢？

06.通过 ES6 模块化的方式导入jQuery，实现列表隔行变色效果

07.安装webpack和webpack-cli,运行npm install webpack@5.42.1 webpack-cli@4.7.2 -D.

08.配置webpack

第一步新建webpack.config.js

第二步修改package.json的脚本名称

09.运行服务:npm run dev 

10.将html中链接的js文件改为新生成的dist下的main.js文件路径。

11.运行当前页面，看运行结果。

12.装自动启动webpack服务打包工具：npm install webpack-dev-server@3.11.2 -D  

注意：当页面出现cannot find的时候，一般是与webpack-cli和webpack-dev-server的版本有关，但也不排除存在端口被占用的情况。建议使用webpack-cli@4.10.0和webpack-dev-server@3.11.2

【默认指定处理的文件名和打包输出的文件名及修改默认设置】

问题描述：在webpack中，默认文件名src和dist，以及入口js文件名为index.js，因此如果想自定义的话，可以通过在webpack.config.js里面修改entry属性： 

【插件2：html-webpack-plugin】

作用：默认复制当前初始页面到根目录上

使用步骤：

01.安装npm install html-webpack-plugin -D

02.配置

01.引入html-webpack-plugin插件

02.实例化 HtmlPlugin 对象

03.调用创建好的实例化对象 htmlPlugin

【插件3：webpack中的loader】 作用：在实际开发过程中，webpack 默认只能打包处理以.js 后缀名结尾的模块。其他非s 后缀名结尾的模块webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错!loader

加载器的作用:协助 webpack 打包处理特定的文件模块。比如:

css-loader 可以打包处理css 相关的文件

less-loader 可以打包处理 less 相关的文件

babel-loader 可以打包处理 webpack 无法处理的高级JS 语法

【插件4：clean-webpack-plugin】

作用：清除旧的dist文件

使用步骤：

01.下载插件：npm install clean-webpack-plugin -D

02.创建函数：conset { CleanWebpackPlugin } = require('clean-webpack-plugin')

03.在module.exports-->plugins: [htmlPlugin]-->plugins: [htmlPlugin,cleanPlugin]

03.打包发布

04.Source Map

作用：Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

使用步骤：

注意事项：

01.在开发阶段，要手动修改Source map的配置，这个属性值eval-source-map既看得到某条源码也看得到行数/module.exports--->devtool:eval-source-map

02.在发布阶段，则省略Source Map中的devtool选项，以防止有心之人通过报错提示定位到打包之前的源代码。

03.属性值nosources-source-map不暴露源码但又能正确显示行数，module.exports--->devtool:nosources-source-map

04.属性值nosources-source-map暴露源码又能显示行数，除了开发调试阶段，否则并不建议用这个。module.exports--->devtool:source-map