一、vite
快速开始
- 全局安装vite
npm i -g vite - 创建vite
npm create vite - 安装依赖
npm i - 运行项目
npm run dev
二、webpack
1、使用步骤
- 初始化项目
npm init -y - 安装依赖
webpack、webpack-cli - 在项目中创建
src目录，然后编写代码（默认主文件index.js） - 执行
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"] } ] } }
书写对象的时候，可以在最后一个属性值后面加上
,并且属性名可以不为字符串但在写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文件夹
loader
loader 让 webpack 能够去处理其他类型的文件（默认只能处理js文件），并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
使用步骤：
- 安装对应的 loader：
yarn add css-loader style-loader ts-loader -D - 配置方式（推荐）：
- 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" }, ], }, };
css-loader 只负责打包，style-loader 负责渲染生效【单一职责原则】
loader 执行顺序为从后向前执行，因此 use 的数组顺序不能调换
- *内联方式：在每个
import语句中显式指定 loader。使用!将资源中的 loader 分开。每个部分都会相对于当前目录解析。
import Styles from 'style-loader!css-loader?modules!./styles.css';
- 使用
!前缀，将禁用所有已配置的 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 中的一种
使用步骤
- 安装
npm install -D babel-loader @babel/core @babel/preset-env
- babel-loader：连接webpack和babel的中间件
- @babel/core：babel的转换核心
- @babel/preset-env：预设环境
- 配置：
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
- 在package.json中设置兼容列表
"browserslist": [ "defaults" ]
plugin
概念
常用插件
html-webpack-plugin
- 这个插件可以在打包代码后，自动在打包目录生成html页面
使用步骤：
- 安装依赖
yarn add -D html-webpack-plugin - 引入依赖
const HTMLPlugin = require("html-webpack-plugin") - 配置插件
plugins: [ new HTMLPlugin({ // title: "Hello Webpack", //设置title template: "./src/index.html" //模板，自动引入script脚本 }) ]
devtool
devtool:"inline-source-map"配置源码的映射，方便调试打包后的代码。
3、开发服务器（webpack-dev-server）
- 安装：
yarn add -D webpack-dev-server - 启动：
yarn webpack serve --open（--open表示启动服务器后自动打开）
配置
webpack –watch执行，（在本地文件夹中访问）代码发生变化时自动更新打包。
