webpack
基本介绍
Webpack 是一个现代前端构建工具，主要用于将多个前端资源（例如 JavaScript、CSS、图片等）打包成一个或多个优化的文件，以便在浏览器中加载。它是开发者在构建复杂的前端应用程序时的重要工具之一，可以帮助管理项目中的模块依赖、优化资源加载性能以及进行代码转换和打包等任务。
Webpack 的一些基本概念和功能：
-
入口（Entry）：Webpack 构建过程的起点。入口指定了从哪个文件开始构建依赖图。一个应用通常有一个或多个入口文件。
-
输出（Output）：指定 Webpack 打包后生成的文件的输出目录和命名规则。这些文件包括合并和压缩后的代码，通常是一个或多个 JavaScript 文件。
-
模块（Module）：在 Webpack 中，一切皆为模块，包括 JavaScript 文件、CSS、图片、字体等。Webpack 使用加载器（Loaders）来处理不同类型的文件，将它们转换为有效的模块。
-
加载器（Loaders）：加载器是用于处理非 JavaScript 文件的插件，例如处理 CSS、图片、字体等文件。加载器允许你在导入模块时对文件进行预处理，然后将其转换为可以集成到依赖图中的模块。
-
插件（Plugins）：插件是 Webpack 的扩展，用于执行各种构建任务，例如代码压缩、代码分割、资源优化等。常见的插件有 HtmlWebpackPlugin（生成 HTML 文件）、MiniCssExtractPlugin（提取 CSS 文件）、UglifyJsPlugin（压缩代码）等。
-
依赖图（Dependency Graph）：Webpack 会根据入口文件和模块之间的导入关系构建一个依赖图。这个图描述了每个模块的依赖关系，以便 Webpack 可以了解哪些模块需要被包含在最终的打包文件中。
-
代码分割（Code Splitting）：通过代码分割，Webpack 可以将应用程序分割成多个包，从而实现按需加载，减少初始加载时间。
-
热模块替换（Hot Module Replacement，HMR）：在开发过程中，Webpack 可以使用 HMR 来实时更新修改过的模块，而无需刷新整个页面。
-
环境（Environment）：Webpack 可以根据开发环境和生产环境进行不同的配置，以实现开发时的调试和生产环境的优化。
-
配置文件（Webpack Configuration）：Webpack 的配置文件是一个 JavaScript 文件，用于配置入口、输出、加载器、插件等各种构建选项。
基本配置
// webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
// 入口文件
entry: path.resolve(__dirname, "src", "main.js"),
// 出口
output: {
// 打包完的文件路径
path: path.resolve(__dirname, "dist"),
// 打包完的文件名
filename: "[name].[hash:8].js",
},
};
// package.json
"scripts": {
"build": "webpack --config webpack.config.js"
},
命令行输入
npm run build
webpack 主要做的事情
-
将
import语句转化为__webpack_require__语句 -
将多个文件打包成一个文件
处理 css
// webpack.config.js
module: {
rules: [
// 处理css
{
// 匹配css
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
}
接入 babel
babel: 将高版本 js 代码转译成低版本
// webpack.config.js
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
],
},
],
}
// main.js
class Person {
constructor(name) {
this.name = name;
}
}
const person = new Person("p");
console.log(person);
