构建工具

用户7837470347198
125 阅读6分钟

简介

  • 当我们习惯了在node中编写代码的方式后，再回到前端编写html、css、js这些东西会感觉到各种的不便。比如：不能放心的使用模块化规范(浏览器兼容性问题)；即使可以使用模块化规范也会面临模块过多时的加载问题(每遇到一个模块浏览器就要进行一次加载)。
  • 我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。
  • 构建工具就起到这样一个作用，通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持代码。

Webpack

概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。【按需打包】

使用步骤

  1. 初始化项目yarn init -y。
  2. 安装打包依赖yarn add -D webpack webpack-cli。
  3. 在项目中创建src目录，然后编写代码（默认主入口文件为index.js）。
  4. . 执行yarn webpack来对代码进行打包，打包后会生成一个dist目录，dist里会有一个main.js就是打包后的文件。

-D表示安装开发依赖，开发依赖是在打包的时候需要使用的，不加-D表示安装运行依赖，运行依赖是代码运行时需要使用的。

src 目录下的是遵循前端开发规范的，src 以外的要用node规范CommonJS。

配置文件(webpack.config.js)

配置文件可以设置一些个性化的打包方式。

常用的有mode、entry、output、loader、plugin。

mode

告知 webpack使用相应模式的内置优化。

  • none：不使用任何默认优化选项。内置优化
  • production：生产模式。
  • development：开发模式。

entry

告知webpack打包的入口文件，默认值是 ./src/index.js（一般不改，约定优于配置）。

  • 单个入口文件语法(最常见）： entry: "./src/index.js"
  • 多个可以传数组： entry: ["./src/file_1.js", "./src/file_2.js"]
  • 多个可以穿对象分别命名打包 entry: {a: "./src/a.js",b: "./src/b.js",},

单个入口文件写法和数组写法都只生成一个打包文件，对象写法是一个文件名生成一个对应的打包文件，生成的打包文件的名字是属性名。属性名: 要打包的文件

output

告知代码打包后的地址，默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 目录下。

path

指定打包目录，必须要绝对路径，默认dist。

  • 一般会使用Node.js中的path模块来操作文件路径： 
    const path = require('path');	//引入path模块
path.resolve(__dirname, "dist")	//表示当前目录下的dist文件夹

    path: path.resolve(__dirname, "dist") //打包到dist文件夹下
filename

指定打包后的文件名,默认main.js。

  • 当打包文件有多个的时候，可以使用变量名的方式进行文件命名 
    filename: "[name].js"
  • 可以使用[id]、[hash]等变量可以记录一下打包的不同版本。 
    filename: "[name]-[id]-[hash].js"
clean

自动清理打包目录，默认false

loader

webpack是默认只处理js文件的，如果需要处理其他类型的文件可以配置loader，loader可以将其转为有效的模块，以供应用程序使用，以及被添加到依赖图中。

babel

  • 在编写JS代码时，经常需要使用一些JS中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。
  • 但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。
  • babel就是这样一个工具，可以将新的JS语法转换为旧的JS，以提高代码的兼容性，在webpack中引入babel的loader即可使用。
使用步骤

  1. 安装 npm install -D babel-loader @babel/core @babel/preset-env

    • babel-loader：连接webpack和babel的中间件。
    • @babel/core：babel的转换核心。
    • @babel/preset-env：预设环境。

  2. 配置

    module: {
  rules: [
    {
      test: /.m?js$/, //mjs或js结尾
      exclude: /(node_modules|bower_components)/, // 排除这两个目录
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

  3. 在package.json中设置兼容列表

    "browserslist": [
        "defaults"
 ]

plugin

  • 插件用来为webpack来扩展功能。
  • 插件目的在于解决 loader无法实现的其他事。
  • webpack 提供很多开箱即用的 插件。
常用插件

  • html-webpack-plugin

    • 该插件可以在打包代码后，自动在打包目录生成html页面。
    • 使用步骤
      1. 安装依赖：yarn add -D html-webpack-plugin
      2. 引入依赖：const HTMLPlugin = require("html-webpack-plugin")
      3. 配置插件： 
        plugins: [
new HTMLPlugin({
    // title: "Hello Webpack",	//设置title
    template: "./src/index.html"	//可以设置模板，自动引入script脚本
})
]

  • devtool

    配置源码的映射，方便调试打包后的代码。

    devtool:"inline-source-map"

开发服务器 (webpack-dev-server)

  • 我们每次修改代码都需要手动重新build一次，这样非常麻烦。
  • 可以使用wabpack --watch来监听，这样代码一发生变化它就会自动重新构建，但是它是以静态资源的形式访问的。
    • 我们的项目最终是要部署到服务器上的，所以webpack提供了一个开发服务器，将dist文件部署到这个开发服务器上，方便我们修改和调试。

使用步骤

  • 安装：yarn add -D webpack-dev-server
  • 启动：yarn webpack serve --open（--open表示启动服务器后自动打开）
  • 可以在package.json中添加自定义命令方便调用 
    "scripts": {
    ...
    "dev": "webpack serve --open"
}

Vite

  • vite也是前端的构建工具。

  • 相较于webpack，vite采用了不同的运行方式：

    1. 开发时，并不对代码打包，而是直接采用 ESM(ES模块) 的方式来运行项目。
    2. 在项目部署时，再对项目进行打包。

  • 除了速度快以外，vite使用起来也更加方便（开箱即用，都配置好了）。

  • 本质上 Vite 和 Webpack 是打包工具，只是 Webpack 比较底层，需要自己手动去配置。

    ESM 必须通过 url 加载页面（即需要通过服务器运行）

基本使用

  1. 安装开发依赖： yarn add -D vite

  2. Vite 的源码目录默认就是项目根目录

    • 在页面中引入JS文件的时候要指定 type="module" 。
    • 修改路径直接在script标签中修改src属性正确即可（webpack需要配置）。

  3. 开发命令：

    • vite：启动开发服务器。
    • vite build：打包代码。
    • vite preview：预览打包后代码。

  4. 使用命令构建项目：

    npm create vite@latest	#使用 NPM
yarn create vite	#使用 Yarn
pnpm create vite	#使用 PNPM
#Vanilla 表示原生JS开发项目

  5. 使用插件

    1. 安装插件：yarn add -D @vitejs/plugin-legacy(兼容传统浏览器的语法转换插件)

    2. 配置文件(vite.config.js)：

      // vite.config.js
import legacy from '@vitejs/plugin-legacy'	//引入插件
import { defineConfig } from 'vite'	//语法提示（可选）
export default defineConfig({	//写上defineConfig配置时会有提示
  plugins: [	//配置插件
    legacy({
      targets: ['defaults', 'IE 11'],	//配置兼容版本
    }),
  ],
})

    需要使用ES6的模块化（export default）去暴露文件（区别于 webpack 使用require）

avatar
文章
阅读
粉丝