前端工程化与webpack

⁢小码云

于 2024-03-12 16:48:14 发布

阅读量942

点赞数 24

文章标签：前端 webpack node.js

本文链接：https://blog.csdn.net/weixin_45142173/article/details/136656944

版权

前端工程化

在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化。实际就是实现前端的四个现代化：模块化；组件化；规范化；自动化。
它的好处主要体现在：

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

webpack https://www.webpackjs.com/ 常用
parcel https://zh.parceljs.org/

webpack 的基本使用

在项目中安装 webpack

在终端运行如下的命令，安装webpack 相关的两个包npm i webpack@5.5.1 webpack-cli@4.2.0 -D

在项目中配置webpack

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

module.exports = {
  mode: 'development', 
// 开发环境：development 不会对打包生成的文件进行代码压缩和性能优化,打包速度快，适合在开发阶段使用
// 生产环境：production 会对打包生成的文件进行代码压缩和性能优化，打包速度很慢，仅适合在项目发布阶段使用
}

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

"scripts": {
    "dev": "webpack", //通过 npm run dev 来执行
  }

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

**webpack.config.js 文件的作用：**webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关
的语法和模块进行 webpack 的个性化配置。

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

const path = require('path')
module.exports={
  entry: path.join(__dirname, './src/index.js'),//入口文件的路径
  // 指定打包的出口
  output: {
    // 表示输出文件的存放路径
    path: path.join(__dirname, './dist'),
    // 表示输出文件的名称,路径加js为了发布之后文件分类明确
    filename: 'js/bundle.js',
  }
}

webpack 中的插件

**webpack-dev-server：**可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
安装：npm i webpack-dev-server@3.11.0 -D
配置：① 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {
    "dev": "webpack,serve", //通过 npm run dev 来执行
  }

② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：webpack-dev-server 会启动一个实时打包的 http 服务器,配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中,提高了实时打包输出的性能，因为内存比物理磁盘速度快很多。
生成到内存中的文件该如何访问？webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件。
例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

**html-webpack-plugin:**是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。
需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份.
安装：npm i html-webpack-plugin@4.5.0 -D
配置：

// 1. 导入插件，得到构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html',
  filename: './index.html',
})
module.exports={
    modu:'development',
    plugins:[htmlPlugin], // 3. 挂载插件的实例对象

解惑 html-webpack-plugin,① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
② HTML 插件在生成的 index.html 页面的底部，自动注入了打包的 bundle.js 文件

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

  devServer: {
    open: true,
    host: '127.0.0.1',
    port: 80,
  },//只要修改配置文件，就要重新启动服务器

webpack 中的loader

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

css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
打包处理css 文件
① 运行 npm i style-loader@2.0.0 css-loader@5.0.1 -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
    rules: [
      // test 表示匹配的文件类型， use 表示对应要调用的 loader
      //  use 数组中指定的 loader 顺序是固定的;多个 loader 的调用顺序是：从后往前调用
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
}

打包处理 less 文件
① 运行 npm i less-loader@7.1.0 less@3.12.2 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
    rules: [
      // test 表示匹配的文件类型， use 表示对应要调用的 loader
      //  use 数组中指定的 loader 顺序是固定的;多个 loader 的调用顺序是：从后往前调用
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
    ]
}

打包处理样式表中与 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: {
          loader: 'url-loader',
          options: {
            limit: 22228,// limit 用来指定图片的大小，单位是字节（byte）只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片
            outputPath: 'image',  
          },
        },
      },
    ]
}

打包处理js 文件中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借
助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：
安装 babel-loader 相关的包：npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D
配置：在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

      {
        test: /\.js$/,
        exclude: /node_modules/,  // exclude 为排除项，不需要处理标注的文件
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-proposal-class-properties'],
          },
        },
      },

打包发布
项目开发完成之后，使用 webpack 对项目进行打包发布的主要原因有以下两点：
① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
② 开发环境下，打包生成的文件不会进行代码压缩和性能优化
为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布
配置webpack 的打包发布：在 package.json 文件的 scripts 节点下，新增 build 命令如下：

  "scripts": {
    "dev": "webpack serve",
    // --model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
    "build": "webpack --mode production"
  },

③ 把 JavaScript 文件统一生成到 js 目录中
④ 把图片文件统一生成到 image 目录中
⑤ 自动清理 dist 目录下的旧文件：为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：npm i clean-webpack-plugin@3.0.0 -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
plugins: [htmlPlugin, cleanPlugin],

Source Map

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着代码压缩混淆前后的对应关系。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
**默认 Source Map 的问题:**开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。
**解决默认 Source Map 的问题:**开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致

module.exports={
  // eval-source-map 仅限在开发模式下使用
  // devtool: 'eval-source-map',
  // 生产环境下，建议关闭 SourceMap 或将 devtool 的值设置为 nosources-source-map
  // devtool: 'nosources-source-map',只想定位报错的具体行数，且不想暴露源码
  // devtool: 'source-map',想在定位报错行数的同时，展示具体报错的源码
}

Source Map 的最佳实践:
① 开发环境下：