Vue-第一天前端工程化与 webpack

最新推荐文章于 2024-06-13 02:48:16 发布

瓜皮233

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签：前端 webpack vue.js

本文链接：https://blog.csdn.net/qq_41050821/article/details/128748392

版权

前端工程化与 webpack

一、前端工程化
二、webpack 的基本使用
三、webpack 中的插件
四、webpack 中的 loader
五、打包发布
六、Source Map

一、前端工程化

1. 小白眼中的前端开发 vs 实际的前端开发

小白眼中的前端开发：
⚫ 会写 HTML + CSS + JavaScript 就会前端开发
⚫ 需要美化页面样式，就拽一个bootstrap 过来
⚫ 需要操作 DOM 或发起 Ajax 请求，再拽一个 jQuery 过来
⚫ 需要渲染模板结构，就用 art-template 等模板引擎

实际的前端开发：
⚫ 模块化（js 的模块化、css 的模块化、其它资源的模块化）
⚫ 组件化（复用现有的 UI 结构、样式、行为）
⚫ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
⚫ 自动化（自动化构建、自动部署、自动化测试）

2. 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的“4 个现代化”：
模块化、组件化、规范化、自动化

3. 前端工程化的好处

前端工程化的好处主要体现在如下两方面：
① 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面
② 最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本

4. 前端工程化的解决方案

早期的前端工程化解决方案：
⚫ grunt（ https://www.gruntjs.net/ ）
⚫ gulp（ https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解决方案：
⚫ webpack（ https://www.webpackjs.com/ ）
⚫ parcel（ https://zh.parceljs.org/ ）

二、webpack 的基本使用

1. 什么是 webpack

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前企业级的前端项目开发中，绝大多数的项目都是基于 webpack 进行打包构建的。

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

① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构
⑤ 运行 npm install jquery –S 命令，安装 jQuery

npm install jquery -S

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

index.html的内容如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/bundle.js"></script>

</head>

<body>
    <ul>
        <li>这是第 1 个小li</li>
        <li>这是第 2 个小li</li>
        <li>这是第 3 个小li</li>
        <li>这是第 4 个小li</li>
        <li>这是第 5 个小li</li>
        <li>这是第 6 个小li</li>
        <li>这是第 7 个小li</li>
        <li>这是第 8 个小li</li>
        <li>这是第 9 个小li</li>
    </ul>
</body>

</html>

index.js 内容如下

// 引入jQuery
import $ from 'jquery'

// 设置隔行变色 入口函数
$(function () {
   
    // 奇数行红色，偶数行蓝色
    $('li:odd').css('background-color', 'red')
    $('li:even').css('background-color', 'pink')
})

3. 在项目中安装 webpack

在终端运行如下的命令，安装webpack 相关的两个包：

npm install webpack@5.5.1 webpack-cli@4.2.0 -D

4. 在项目中配置 webpack

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
   
    module: 'development' //mode 用来指定构建模式。可选值有 development 和 production
}

② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"dev":"webpack"   //（需删除）scripts 节点下的脚本，可以通过npm run 运行，例如：npm run dev

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

 npm run dev

4.1 mode 的可选值

mode 节点的可选值有两个，分别是：
① development
⚫ 开发环境
⚫ 不会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度快，适合在开发阶段使用

② production
⚫ 生产环境
⚫ 会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度很慢，仅适合在项目发布阶段使用

4.2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

4.3 webpack 中的默认约定

在 webpack 中有如下的默认约定：
① 默认的打包入口文件为src -> index.js
② 默认的输出文件路径为dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

4.4 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下：

const path = require('path') //导入操作路径的模块

module.exports = {
   
    entry: path.join(__dirname, './src/index1.js'), //打包入口文件的路径
    output: {
   
        path: path.join(__dirname, './dist'),//输出文件存放路径
        filename: 'bundle.js' //输出文件名字
    },
    mode: 'development'

最低0.47元/天解锁文章

瓜皮233

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue-第一天前端工程化与 webpack

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，就是实现前端的“4 个现代化”：模块化、组件化、规范化、自动化概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
复制链接

扫一扫