webpack入门精细版

[1. 什么是Webpack？它的主要功能是什么？](#1. 什么是Webpack？它的主要功能是什么？)

[2. Webpack的核心概念：](#2. Webpack的核心概念：)

3.通过Webpack5搭建脚手架（代码）

1.终端命令

2.搭建初始骨架

3.配置出入口文件

4.打包index.html文件

1. 什么是Webpack？它的主要功能是什么？

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

模块打包

将项目中的所有模块（JavaScript、CSS、图片等）当作一个整体，通过依赖关系将它们打包成一个或多个静态资源文件。

依赖管理

Webpack可以分析模块之间的依赖关系，根据配置的入口文件找出所有依赖的模块，并将其整合到打包结果中。

文件转换

Webpack本身只能处理JavaScript模块，但通过加载器（Loader）的使用，可以将其他类型的文件（如CSS、LESS、图片等）转换为有效的模块，使其能够被打包到最终的结果中。

代码拆分

Webpack支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。

插件系统

Webpack提供了丰富的插件系统，可以通过插件实现各种功能的扩展，例如压缩代码、自动生成HTML文件等。

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

2. Webpack的核心概念：

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

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

综上所述，Webpack的核心概念包括entry、output、loader和plugin。

entry指定Webpack的入口文件
output定义打包输出的文件及路径
loader用于处理不同类型的文件
plugin用于扩展Webpack的功能

这些概念共同协作，实现了模块打包和构建的功能

3.通过Webpack5搭建脚手架（代码）

1.终端命令

** node

// 1.在空文件夹初始化package.json文件

npm init

// 2.安装webpack以及webpack-cli依赖包

npm install webpack webpack-cli

安装完成后的目录如下：

2.搭建初始骨架

（1）、在项目的根目录下，src文件夹通常存放项目的源代码，我们在src文件夹下新建一个main.js文件和tools文件夹：

（2）、在main.js里引入add()方法

（3）、在public文件夹新建一个index.html文件，如图所示：

3.配置出入口文件

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

javascript 复制代码

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命令构建脚本:

当我们在终端输入：

npm run build

可以看见：在项目的目录里自动生成了一个dist文件夹和dist/chunk的文件

可以发现对比传统脚手架的npm run build,我们自己搭建的脚手架并没有在dist文件夹里生成index.html文件，现在我们来试试吧！

4.打包index.html文件

1、下载html-webpack-plugin插件

npm install html-webpack-plugin -D

2、在webpack.config.js文件里引入

此时我们把原先的dist文件夹删掉，重新执行npm run build 指令

可以看见我们已经生成了index.html文件啦，让我们打开进入到index.html文件并通过鼠标右键的Open With Live Serve打开页面试试吧！

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可以识别的模块。
这只是一些常用的Webpack loader，实际上还有很多其他的loader可以根据具体的需求进行选择和配置。使用适当的loader可以提高开发效率并优化最终打包结果。

话不多说，我们去尝试一下用loader处理css文件，首先安装必要的依赖包:

npm install css-loader style-loader

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

javascript 复制代码

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

接着我们重新在终端执行npm run build指令：

因此，我们平时使用的vue-cli脚手架为什么能识别css呢？这下明白了吧，原理就是css-loader和style-loader

同理，如果我们项目中想采用less的写法，则需要先下载less-loader来处理.less结尾的文件

举例：

复制代码
npm i less-loader -D

在webpack.config.js中添加配置

webpack入门 精细版

1. 什么是Webpack？它的主要功能是什么？

2. Webpack的核心概念：

3.通过Webpack5搭建脚手架（代码）

1.终端命令

2.搭建初始骨架

3.配置出入口文件

4.打包index.html文件

webpack入门精细版