介绍

Webpack是一个前端模块打包工具。它可以将多个模块按照依赖关系进行静态分析，并生成一个或多个打包后的文件。Webpack的主要功能包括：

模块打包将项目中的所有模块（JavaScript、CSS、图片等）当作一个整体，通过依赖关系将它们打包成一个或多个静态资源文件。
依赖管理 Webpack可以分析模块之间的依赖关系，根据配置的入口文件找出所有依赖的模块，并将其整合到打包结果中。
文件转换 Webpack本身只能处理JavaScript模块，但通过加载器（Loader）的使用，可以将其他类型的文件（如CSS、LESS、图片等）转换为有效的模块，使其能够被打包到最终的结果中。
代码拆分 Webpack支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。
插件系统 Webpack提供了丰富的插件系统，可以通过插件实现各种功能的扩展，例如压缩代码、自动生成HTML文件等。

总之，Webpack的主要功能是将项目中的多个模块打包成一个或多个静态资源文件，并提供了丰富的功能和插件系统来满足前端开发的需求。

核心概念

Webpack的核心概念包括entry（入口）、output（输出）、loader（加载器）和plugin（插件）。

Entry（入口）：Webpack将从指定的入口文件开始分析和构建依赖关系树。入口可以是单个文件或多个文件，Webpack会根据入口配置找出所有的依赖模块。
Output（输出）：指定Webpack打包后的文件输出的路径和文件名。可以通过配置output选项来指定输出文件的路径、名称和格式等。
Loader（加载器）：Webpack本身只能处理JavaScript模块，但通过Loader的使用，可以处理其他类型的文件（如CSS、LESS、图片等）。Loader的作用是在模块加载时对其进行转换和处理。
Plugin（插件）：插件用于扩展Webpack的功能。它可以在打包的不同阶段执行特定的任务。例如，可以使用插件来压缩代码、拆分代码、生成HTML文件等。插件通过在Webpack配置中引入并实例化，然后将其添加到plugins数组中。

first demo

npm init // 1.在空文件夹初始化package.json文件
npm install webpack webpack-cli // 2.安装webpack以及webpack-cli依赖包

完成后package.json 如下:

{
    "name": "app",
    "version": "1.0.0",
    "main": "index.js",
    "dependencies": {
        "webpack": "^5.101.3",
        "webpack-cli": "^6.0.1"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": "",
}

项目的根目录下，创建src文件夹，在src文件夹下新建一个main.js文件和tools文件夹：

tools\index.js export const add = (a,b) => { return a + b; }

main.js import { add } from “./tools”; console.log(add(1,2));
项目的根目录下，创建public文件夹，新建index.html

<!DOCTYPE html>
Webpack App

在根目录新建webpack.config.js文件，配置出入口：

const path = require(“path”)

module.exports = { mode: ‘development’, // 指定为开发模式

 // 入口文件
 entry: {
     main: './src/main.js'
 },
 // 出口文件
 output: {
     // 输出到dist文件夹(打包自动生成)
     path: path.resolve(__dirname, 'dist'), // __dirname：表示当前文件的绝对路径(根目录)
     // 输出文件名在dist文件夹里的js文件夹的chunk.js下
     filename: 'js/chunk-[contenthash].js' // 使用由生成的内容产生的 hash
 },  }

现在，我们已经配置好了webpack。在package.json中，我们创建一个运行webpack命令构建脚本:

“build”: “webpack”
当我们在终端输入： npm run build
可以看见：在项目的目录里自动生成了一个dist文件夹和dist/chunk的文件

打包index.html文件

下载html-webpack-plugin插件

npm install html-webpack-plugin -D

在webpack.config.js文件里引入

const path = require(“path”) const HtmlWebpackPlugin = require(“html-webpack-plugin”)

module.exports = { mode: ‘development’, // 指定为开发模式

 // 入口文件
 entry: {
     main: './src/main.js'
 },
 // 出口文件
 output: {
     // 输出到dist文件夹(打包自动生成)
     path: path.resolve(__dirname, 'dist'), // __dirname：表示当前文件的绝对路径(根目录)
     // 输出文件名在dist文件夹里的js文件夹的chunk.js下
     filename: 'js/chunk-[contenthash].js' // 使用由生成的内容产生的 hash
 },
 plugins: [
     new HtmlWebpackPlugin({
     template: './public/index.html',
     filename: 'index.html',
     inject: 'body'
     })
 ]  }

此时我们把原先的dist文件夹删掉，重新执行npm run build 指令
可以看见我们已经生成了index.html文件了

处理css和less文件

把main.js的内容改为：

const el = document.createElement('div')
el.className = 'title'
el.innerHTML = "这是标题"
document.body.appendChild(el)

在src目录下新建一个style文件夹，存放style.css文件

.title {
    font-size: 50px;
}

并在main.js中引入

import './style/style.css'
const el = document.createElement('div')
el.className = 'title'
el.innerHTML = "这是标题"
document.body.appendChild(el)

重新运行npm run build，报错

ERROR in ./src/style/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

这里我们要引入webpack另一个很重要的配置——```loader``的概念
Webpack的loader是用于处理模块文件的转换工具。它们可以将不同类型的文件（如CSS、LESS、图片等）转换为可以被Webpack处理的有效模块，以便将其包含在最终的打包结果中。
以下是一些常用的Webpack loader及其作用：

babel-loader：将ES6+代码转换为ES5语法，以便在旧版本的浏览器中运行。
style-loader 和 css-loader：用于处理CSS文件。css-loader主要负责处理样式文件中的import和url语句，而style-loader将转换后的CSS模块直接注入到HTML页面中。
file-loader 和 url-loader：用于处理图片和其他资源文件。file-loader会为每一个文件生成一个对应的文件，而url-loader将小于设定大小的文件转换为base64编码的URL，减少HTTP请求。
sass-loader 和 less-loader：用于处理Sass和Less预处理器。它们将Sass和Less代码转换为普通的CSS代码。
postcss-loader：用于为CSS代码添加浏览器兼容性前缀，以确保在不同浏览器上的一致性。
html-loader：用于处理HTML文件，将其中的图片等资源转换为Webpack可以识别的模块。
ts-loader 能将 TypeScript 转为 JavaScript

下面用loader处理css文件，首先安装必要的依赖包:

npm install css-loader style-loader

接着，在webpack.config.js里添加对应配置:

module: {
    rules: [
    {
        test: /\.css$/, // 正则匹配css文件
        use: ['style-loader','css-loader'] // 注意顺序！是从后往前加载的（即先加载css-loader，再加载style-loader）
    }
    ]
},

重新在终端执行npm run build指令, 运行index.html(方法同上)，可以发现.title的样式已经生效

tips: 每次执行build之后生成的js文件都还在，能不能实现不手动删之前的记录，而是每次运行打包命令后自动覆盖呢?

答案是可以的，我们在webpack.config.js的output里配置一下就可以了：

output: {
    // 输出到dist文件夹(打包自动生成)
    path: path.resolve(__dirname, 'dist'), // __dirname：表示当前文件的绝对路径(根目录)
    // 输出文件名在dist文件夹里的js文件夹的chunk.js下
    filename: 'js/chunk-[contenthash].js', // 使用由生成的内容产生的 hash
    clean:true
},

Reference

Webpack–入门只看这一篇就够了(图文＋代码）

Webpack 学习笔记

介绍

核心概念

first demo

打包index.html文件

处理css和less文件

Reference

CATALOG

FEATURED TAGS

FRIENDS