构建工具vite/webpack

一、vite

快速开始

1. 全局安装vite npm i -g vite
2. 创建vite npm create vite
3. 安装依赖 npm i
4. 运行项目 npm run dev

二、webpack

1、使用步骤

1. 初始化项目npm init -y
2. 安装依赖webpack、webpack-cli
3. 在项目中创建src目录，然后编写代码（默认主文件index.js）
4. 执行npm webpack来对代码进行打包（打包后观察dist目录）

cli: command line interface 命令行工具

安装依赖npm add -D webpack webpack-cli, -d表示设置为开发依赖

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

2、配置文件（webpack.config.js）

const path = require("path")
module.exports = {
    mode: "production", 
    entry: "./src/index.js",
    output: {
    }, 
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

书写对象的时候，可以在最后一个属性值后面加上,并且属性名可以不为字符串

但在写JSON的时候，属性名也需要加上“”并且最后不能加上,

mode

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

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

entry

默认值是 ./src/index.js（一般不改，约定优于配置）

• 单个入口语法【最常见】 entry: string | [string]
• 多个传数组 entry: ['./src/file_1.js', './src/file_2.js']
• 对象写法分别命名打包 entry: {app: './src/app.js',adminApp: './src/adminApp.js',},

output

默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中

• filename: "bundle.js" 设置打包后的文件名

  多个入口 entry 的情况 filename: [name]-[id]-[hash].js

  使用 占位符(substitutions) 来确保每个文件具有唯一的名称（很少用）

• clean: true 自动清理打包目录（path指定的目录），只保留当前这次打包的文件

• path: "" 指定打包目录，必须要绝对路径

  一般会使用Node.js中的path模块来操作文件路径

  const path = require('path');	//引入path模块
  path.resolve(__dirname, "dist")	//表示当前目录下的dist文件夹
  1
  2

loader

loader 让 webpack 能够去处理其他类型的文件（默认只能处理js文件），并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

使用步骤：

1. 安装对应的 loader：yarn add css-loader style-loader ts-loader -D

2. 配置方式（推荐）：

   • test 属性：识别出哪些文件需要被转换（使用正则表达式/\.css$/i）
   • use 属性：定义出在进行转换时，使用哪个 loader（字符串、数组、对象）
   • type 属性：加载图像资源，设置为"asset/resource"
   • exclude 属性：不需要转换的文件夹（正则表达式）

   module.exports = {
     module: {	// 易漏点
       rules: [ 
         { test: /\.css$/, use: ['style-loader','css-loader'] },
         { test: /\.ts$/, use: 'ts-loader' },
         { test:/\.(jpg|png|gif)$/i,type:"asset/resource" },
       ],
     },
   };
   1
   2
   3
   4
   5
   6
   7
   8
   9

   css-loader 只负责打包，style-loader 负责渲染生效【单一职责原则】

   loader 执行顺序为从后向前执行，因此 use 的数组顺序不能调换

3. *内联方式：在每个 import 语句中显式指定 loader。

   使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

   import Styles from 'style-loader!css-loader?modules!./styles.css';
   1

   • 使用!前缀，将禁用所有已配置的 normal loader(普通 loader)
   • 使用!!前缀，将禁用所有已配置的 loader（preLoader, loader, postLoader）
   • 使用-!前缀，将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders

   选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

   尽可能使用 module.rules，因为这样可以减少源码中样板文件的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

babel

概念

• 在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。

• 但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。

• babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性。

• 如果希望在webpack支持babel，则需要向webpack中引入babel的loader

  是 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$/,
         exclude: /(node_modules|bower_components)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env']
           }
         }
       }
     ]
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

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

   "browserslist": [
           "defaults"
    ]
   1
   2
   3

   配置参考：https://github.com/browserslist/browserslist

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脚本
        })
    ]
1
2
3
4
5
6

devtool

devtool:"inline-source-map"配置源码的映射，方便调试打包后的代码。

3、开发服务器（webpack-dev-server）

• 安装：yarn add -D webpack-dev-server
• 启动：yarn webpack serve --open（--open表示启动服务器后自动打开）

配置 webpack –watch 执行，（在本地文件夹中访问）代码发生变化时自动更新打包。

4、grunt/glup的对比