前端工程化

前端工程化

什么是前端工程化?

把前端开发所需的工具、技术、流程、经验等进行规范化、 标准化。

好处:前端开发自成体系,有一套标准的开发方案和流程。

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

Wabpack

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

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

  • 让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率项目的可维护性

webpack 使用

一、创建列表隔行变色项目:

  1. 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json
  2. 新建 src 源代码目录 ,在此目录下新建 src -> index.html首页和 src ->index.js脚本文件
  3. 运行 npm install jquery –S 命令,安装 jQuery
  4. 通过 ES6 模块化的方式导入 jQuery,实现列表隔行变色效

二、 安装webpack包:

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

三、配置webpack

  1. 在项目根目录中,创建webpack.config.js 配置文件,并初始化如下的基本配置
module.exports = {
  mode: 'development',  // mode 代表 webpack运行的模式,可选值有两个development和 production
  },

2.在 package.json 的 scripts 节点下,新增 dev 脚本如下

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

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

mode可选值

mode 代表 webpack 运行的模式,可选值有两个 development 和 production

  • 开发时候一定要用 development,因为追求的是打包的速度,而不是体积;

  • 发布上线的时候一定能要用 production,因为上线追求的是体积小,而不是打包速度快

webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中,有如下的默认约定: ①

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

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

自定义打包的入口与出口

在 webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

const path = require('path')   // 导入node.js中专门操作路径的模块

module.exports = {
  mode: 'development',
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index1.js'),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },

webpack 中的插件

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

常用插件

(1). webpack-dev-server 修改源代码后自动打包

安装:

npm install webpack-dev-server@3.11.2 -D

配置:

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

再次运行 npm run dev 命令,重新进行项目的打包,此时webpack-dev-server 会启动一个实时打包的 http 服务器,在浏览器中访问 http://localhost:8080 地址,查看自动打包效果。

打包生成的文件哪儿去了?
  1. 不配置 webpack-dev-server 的情况下,打包生成的文件,会存放到实际的物理磁盘上
  2. 配置了之后,打包生成的文件存放到了内存中。
生成到内存中的文件该如何访问?

webpack-dev-server 生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。

例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件。

(2). html-webpack-plugin自定制 index.html 页面的内容

通过插件将 src 目录下的 index.html 首页,复制到项目根目录中一份:

安装:

npm install html-webpack-plugin@5.3.2 -D

配置:

// 1. 导入 html-webpack-plugin 这个插件,得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 2. new 构造函数,创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})
module.exports = {
    mode: 'development',
     plugins: [htmlPlugin], // 3.通过plugins节点,让插件生效
}

解惑 html-webpack-plugin

  1. 通过 HTML 插件复制到项目根目录中的 index.html 页面,也被放到了内存中
  2. 生成的 index.html 页面,自动注入了打包的 bundle.js 文件

devServer 节点

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

devSever:{
	open: true, // 初次打包完成后,自动打开浏览器
	host: '127.0.0.1',  // 实时打包使用的主机地址
	port: 80,  // 端口号
}

修改配置文件必须重启才能生效!!!

webpack 中的 loader

非 .js 后缀名结尾的模块, webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错。

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

loader 的调用过程

前端工程化

前端工程化

打包处理 css 文件

安装插件:

npm i style-loader@3.0.0 css-loader@5.2.6 -D

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

module: {
    rules: [   // 所有第三方文件模块匹配规则
        // 定义了不同模块对应的 loader
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
}

其中,test 表示匹配的文件类型, use 表示对应要调用的 loader

注意:

  • use 数组中指定的 loader 顺序是固定的
  • 多个 loader 的调用顺序是:从后往前调用
打包处理 less 文件

安装:

 npm i less-loader@10.0.1 less@4.1.1 -D

webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:

module: {
    rules: [   // 所有第三方文件模块匹配规则
        // 定义了不同模块对应的 loader
        { test: /\.css$/, use: ['style-loader', 'css-loader','less-loader'] },
    ]
}
打包处理样式表中与 url 路径相关的文件

安装:

npm i url-loader@4.1.1 file-loader@6.2.0 -D

配置:

module: {
    rules: [   
      // 在配置 url-loader 的时候,多个参数之间,使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
    ]
}

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

  • limit 用来指定图片的大小,单位是字节(byte)
  • 只有 ≤ limit 大小的图片,才会被转为 base64 格式的图片
打包处理 js 文件中的高级语法

安装:

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

配置:

module: {
    rules: [   
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候,程序员只需要把自己的代码进行转换即可;一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性,不需要程序员关心
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
    ]
}

然后在项目根目录下,创建名为 babel.config.js的配置文件,定义 Babel 的配置项如下:

module.exports = {
  // 声明 babel 可用的插件
  // 将来,webpack 在调用 babel-loader 的时候,会先加载 plugins 插件来使用
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

完整配置:

const path = require('path')

// 1. 导入 html-webpack-plugin 这个插件,得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数,创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})

// 注意:左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 使用 Node.js 中的导出语法,向外导出一个 webpack 的配置对象
module.exports = {
  // 在开发调试阶段,建议大家都把 devtool 的值设置为 eval-source-map
  // devtool: 'eval-source-map',
  // 在实际发布的时候,建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
  devtool: 'nosources-source-map',
  // mode 代表 webpack 运行的模式,可选值有两个 development 和 production
  // 结论:开发时候一定要用 development,因为追求的是打包的速度,而不是体积;
  // 反过来,发布上线的时候一定能要用 production,因为上线追求的是体积小,而不是打包速度快!
  mode: 'development',
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index1.js'),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },
  // 3. 插件的数组,将来 webpack 在运行时,会加载并调用这些插件
  plugins: [htmlPlugin, new CleanWebpackPlugin()],
  devServer: {
    // 首次打包成功后,自动打开浏览器
    open: true,
    // 在 http 协议中,如果端口号是 80,则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: '127.0.0.1'
  },
  module: {
    rules: [
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理 .less 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片文件的 loader
      // 如果需要调用的 loader 只有一个,则只传递一个字符串也行,如果有多个loader,则必须指定数组
      // 在配置 url-loader 的时候,多个参数之间,使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候,程序员只需要把自己的代码进行转换即可;一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性,不需要程序员关心
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  resolve: {
    alias: {
      // 告诉 webpack,程序员写的代码中,@ 符号表示 src 这一层目录
      '@': path.join(__dirname, './src/')
    }
  }
}

打包发布

在 package.json 文件的 scripts 节点下,新增 build 命令如下:

 "scripts": {
    "dev": "webpack serve", // 开发环境中,运行dev命令
    "build": "webpack --mode production"  // 项目发布时使用biild命令
  },
  • –model 指定的参数项,会覆盖 webpack.config.js 中的 model 选项
js 文件统一生成到 js 目录中

webpack.config.js 配置文件的 output 节点中,进行如下的配置:

output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },
图片文件统一生成到 image 目录中

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

// 在配置 url-loader 的时候,多个参数之间,使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
自动清理 dist 目录下的旧文件

前端工程化

Source Map 问题

代码定位问题和防止代码泄露.

Source Map 的最佳实践 ①

  1. 开发环境下:
    • 建议把 devtool 的值设置为eval-source-map
    • 好处:可以精准定位到具体的错误行
  2. 生产环境下:
  • 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
  • 好处:防止源码泄露,提高网站的安全
module.exports = {
  // devtool: 'eval-source-map',
  devtool: 'nosources-source-map',
  mode: 'development',
上一篇:移动端适配插件——px2rem-loader


下一篇:关于我对webpack的浅薄理解