（一）前端工程化与Webpack

Agneei

已于 2022-04-05 23:40:15 修改

阅读量1.2k

点赞数 1

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

于 2022-04-05 23:29:47 首次发布

本文链接：https://blog.csdn.net/weixin_43849430/article/details/123968355

版权

Vue2.0 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue2.0之前端工程化与Webpack

1. 前端工程化

1.1 小白眼中的前端开发

会写HTML+ CSS +JavaScript就会前端开发
需要美化页面样式，就拽一个bootstrap过来
需要操作DOM或发起Ajax请求，再拽一个jQuery过来
要快速实现网页布局效果，就拽一个Layui过来

1.2 实际的前端开发

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

2. 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
企业中的Vue 项目和React项目，都是基于工程化的方式进行开发的。
好处：前端开发自成体系，有一套标准的开发方案和流程。

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

3.1 早期的前端工程化解决方案

grunt（https:// www.gruntjs.net/ ）
gulp（https://www.gulpjs.com.cn/ ）

3.2 目前主流的前端工程化解决方案

webpack（https://www.webpackjs.com/）
parcel（https://lzh.parceljs.org/）

4. Webpack的基本使用

4.1 什么是webpack

概念：webpack是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

4.2 创建列表隔行变色项目

① 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
② 新建src源代码目录
③ 新建src -> index.html首页和src -> index.js脚本文件初始化首页基本的结构
⑤ 运行npm install jquery -s命令，安装jQuery
⑥ 通过ES6模块化的方式导入jQuery，实现列表隔行变色效果

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <!-- <script src="./index.js"></script> -->
  <!-- <script src="/dist/main.js"></script> -->
  <!-- 访问内存中的js文件 -->
  <script src="/main.js"></script>
</head>
<body>
  <!-- ul>(li{这是第$个li})*6 -->
  <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>
  </ul>
</body>
</html>

// 使用ES6导入语法
import $ from 'jquery'
// 定义jQuery的人口函数
$(function () {
  $('li:odd').css('background', '#ccc')
  $('li:even').css('background', 'pink')
})

4.3 在项目中安装Webpack

在终端运行如下的命令，安装webpack相关的两个包
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
-S是--save的简写，-D是--save-dev的简写

4.4 在项目中配置Webpack

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

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
  // mode用来指定构建模式，可选值有 development和 production
  // 结论:开发时候一定要用development，因为追求的是打包的速度，而不是体积;
  // 反过来，发布上线的时候一定能要用production，因为上线追求的是体积小，而不是打包速度快!
    mode : 'development'
}

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

"scripts": {
    "dev":"webpack" // script节点下的脚本，可以通过npm run执行，例如npm run dev
},

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

4.5 mode的可选值

mode 节点的可选值有两个，分别是：

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

4.6 Webpack中的默认约定

在webpack4.x和5.x的版本中，有如下的默认约定：

默认的打包入口文件为 src -> index.js
默认的输出文件路径为 dist -> main.js

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

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

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

const path = require('path') // 导入Node.js中专门操作路径的模块
module.exports = {
  entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件的存放路径
    filename: 'bundle.js' // 输出文件的名称
  }
}

5. Webpack中的插件

5.1 Webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让 webpack用起来更方便。最常用的webpack插件有如下两个：

webpack-dev-serverr
类似于node.js阶段用到的nodemon工具
每当修改了源代码，webpack会自动进行项目的打包和构建
html-webpack-plugin
webpack中的HTML插件（类似于一个模板引擎插件）
可以通过此插件自定制index.html页面的内容

5.2 安装并配置webpack-dev-server

运行如下的命令，即可在项目中安装此插件：npm install webpack-dev-server@3.11.2 -D
配置webpack-dev-server
修改 package.json -> scripts中的dev命令如下：
```
"scripts": {
    "dev": "webpack serve" // script节点下的脚本，可以通过npm run执行
},
```
再次运行npm run dev命令，重新进行项目的打包
在浏览器中访问http://localhost:8080地址，查看自动打包效果
注意： webpack-dev-server会启动一个实时打包的http服务器
如遇报错Unable to load '@webpack-cli/serve' command，是因为webpack 4.X 以后，都是通过 webpack-cli 脚手架进行打包的，webpack-cli 没有安装成功，就会报出上面的错误，运行以下代码： npm install webpack-cli --save-dev

5.3 安装并配置html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：npm install html-webpack-plugin@5.3.2 -D

配置html-webpack-plugin（作用：直接进入html页面）

// 1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.创建HTML插件的实例
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html',//指定原文件的存放路径
  filename: './index.html'//指定生成的文件路径
})
module.exports = {
  // 3.通过plugins节点，使htmlPlugin插件生效
  plugins: [htmlPlugin]
}

devServer节点
在webpack.config.js 配置文件中，可以通过devServer节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：
```
module.exports = {
  // 3.通过plugins节点，使htmlPlugin插件生效
  plugins: [htmlPlugin],
  devServer: {
    open: true,
    host: '127.0.0.1',
    // 在http协议中，如果端口号是80，则可以省略
    port: 80
  }
}
```
注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

6. Webpack中的loader

6.1 loader概述

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！
loader加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

css-loader可以打包处理.css相关的文件
less-loader 可以打包处理.less相关的文件
babel-loader可以打包处理 webpack 无法处理的高级Js语法

6.2 loder的调用过程

loder的调用过程

6.3 打包处理css文件

运行npm i style-loader@3.0.0 css-loader@5.2.6 -D命令，安装处理css文件的loader
在webpack.config.js的 module -> rules 数组中，添加loader规则如下:

//所有第三方文件模块的匹配规则
module: { 
  //文件后缀名的匹配规则
  rules: [ 
    {test: /\.css$/, use: [ "style-loader ","css-loader" ] }
  ]
}

其中，test表示匹配的文件类型，use表示对应要调用的loader
注意：use数组中指定的loader顺序是固定的；多个loader的调用顺序是从后往前调用
整个过程：
① webpack默认只能打包处理.js结尾的文件，处理不了其它后缀的文件
② 由于代码中包含了 index.css 这个文件，因此webpack默认处理不了
③ 当webpack发现某个文件处理不了的时候，会查找 webpack.config.js 这个配置文件，看module.rules数组中，是否配置了对应的loader 加载器
④ webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader）
⑤ 当css-loader处理完毕之后，会把处理的结果，转交给下一个loader（转交给style-loader）
⑥ 当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack
⑦ webpack 把 style-loader 处理的结果，合并到/dist/main.js中，最终生成打包好的文件。

6.4 打包处理less文件

运行npm i less-loader@10.0.1 less@4.1.1 -D命令
在webpack.config.js的 module -> rules 数组中，添加loader规则如下:

module: {
    //文件后缀名的匹配规则
    rules: [
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
    ]
  }

6.5 打包处理样式表中与url路径相关的文件

运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
在webpack.config.js的module -> rules数组中，添加loader规则如下:

module: {
    //文件后缀名的匹配规则
    rules: [
      { test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'}
    ]
  }

其中?之后的是loader的参数项：

limit用来指定图片的大小，单位是字节( byte)
只有≤limit大小的图片，才会被转为base64格式的图片

6.6 打包处理js 文件中的高级语法

webpack只能打包处理一部分高级的JavaScript 语法，对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。例如 webpack无法处理下面的JavaScript代码：

//定义装饰器函数
function info(target) {
  target.info = 'Person info'
}
//为Person类应用info装饰器
@info
//定义一个普通的类
class Person {}
//打印Person的静态参数info
console.log(Person.info)

运行如下的命令安装对应的依赖包npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在webpack.config.js 的 module -> rules 数组中，添加loader 规则如下：

//注意：必须使用exclude指定排除项；因为node_modules目录下的第三方包不需要被打包
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

配置babel-loader
在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下：

module.exports = {
//声明babel 可用的插件
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]

7. 打包发布

7.1 配置webpack的打包发布

在package.json文件的scripts节点下，新增build命令如下：
```
"scripts": {
  "dev": "webpack serve", //开发环境中，运行dev命令
  "build": "webpack --mode production" //项目发布时，运行build命令
},
```
–model是一个参数项，用来指定webpack的运行模式；production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。然后npm run build运行。
注意：通过–model指定的参数项，会覆盖 webpack.config.js 中的model选项。

7.2 把JavaScript文件统一生成到js目录中

在 webpack.config.js 配置文件的output节点中，进行如下的配置：

output:{
  path: path.join(__dirname,'dist),
  //明确告诉 webpack 把生成的 bundle.js 文件存放到dist目录下的js子目录中
  filename : 'js/bundle.js '
}

7.3 把图片文件统一生成到image目录中

修改webpack.config.js 中的 url-loader 配置项，新增outputPath选项即可指定图片文件的输出路径：

{
  test: /\.jpg|png|gif$/,
  use: 'url-loader?limit=22229&outputPath=images'
},

7.4 自动清理dist目录下的旧文件

为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置clean-webpack-plugin插件：npm install clean-webpack-plugin@3.0.0 -D

// 按需导入插件、得到插件的构造函数之后，创建插件的实例对象
// 左侧的花括号表示解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
// 把创建的cleanPlugin插件实例对象，挂载到plugins节点中
plugins: [htmlPlugin,cleanPlugin] // 挂载插件

8. Source Map

8.1 什么是Source Map

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

8.2 默认Source Map的问题

开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。示意图如下：

8.3 解决默认Source Map的问题

开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports { 
  mode: 'development ' ,
  // eval-source-map仅限在"开发模式"下使用，不建议在"生产模式"下使用。
  // 此选项生成的 Source Map 能够保证"运行时报错的行数"与"源代码的行数"保持一致
  devtool: 'eval-source-map'
}

8.4 webpack 生产环境下的Source Map

在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map的形式暴露给别有所图之人。
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。实际效果如图所示：

8.5 Source Map的最佳实践

开发环境下：
建议把devtool的值设置为eval-source-map
好处：可以精准定位到具体的错误行
生产环境下：
建议关闭Source Map或将devtool的值设置为nosources-source-map
好处：防止源码泄露，提高网站的安全性
答案:不需要!
实际开发中会使命令行工具（俗称CLI）一键生成带有webpack的项目
开箱即用，所有webpack配置项都是现成的!
我们只需要知道webpack中的基本概念即可!
实际开发中需要自己配置webpack吗?
答案：不需要!
实际开发中会使命令行工具（俗称CLI）一键生成带有webpack的项目开箱即用，所有webpack配置项都是现成的！
我们只需要知道webpack中的基本概念即可！

9. 讲解Webpack中@的原理及好处

在这里插入图片描述

Agneei

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
（一）前端工程化与Webpack

前端工程化与Webpack1. 前端工程化1.1 小白眼中的前端开发会写HTML+ CSS +JavaScript就会前端开发需要美化页面样式，就拽一个bootstrap过来需要操作DOM或发起Ajax请求，再拽一个jQuery过来要快速实现网页布局效果，就拽一个Layui过来1.2 实际的前端开发模块化（js 的模块化、css的模块化、资源的模块化）组件化（复用现有的UI结构、样式、行为）规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）自动化（自动化
复制链接

扫一扫