Webpack入门基础知识及案例

webpack相信大家都已经不陌生了，应用程序的静态模块打包工具。前面我们总结了vue，react入门基础知识，也分别做了vue3的实战小案例，react的实战案例，那么我们如何使用webpack对项目进行模块化打包呢？ 话不多说，开始！！

目录

一、熟悉webpack的主要功能

二、Webpack的核心概念

三、使用webpack5搭建脚手架

[1.然后执行npm init 进行初始化， npm install webpack webpack-cli](#1.然后执行npm init 进行初始化， npm install webpack webpack-cli)

[2.在项目src文件夹下新建main.js和 tools>index.js文件](#2.在项目src文件夹下新建main.js和 tools>index.js文件)

3.打包index.html文件

4.打包css文件。如果我们想创建一个css呢？

5.如何处理图像资源呢？

6.babel的转化

7.处理.vue结尾的文件

8.如何自动运行打包后的index文件

---

一、熟悉webpack的主要功能

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

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

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

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

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

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

二、Webpack的核心概念

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

1.Entry 【入口文件】， 指定Webpack的入口文件，Webpack将从指定的入口文件开始分析和构建依赖关系树。入口可以是单个文件或多个文件；

**2.Output【输出】**义打包输出的文件及路径，指定Webpack打包后的文件输出的路径和文件名

3.Loader【加载器】 Webpack本身只能处理JavaScript模块，但通过Loader的使用，可以处理其他类型的文件（如CSS、LESS、图片等）

**4.Plugin【插件】**插件用于扩展Webpack的功能。它可以在打包的不同阶段执行特定的任务。例如，可以使用插件来压缩代码、拆分代码、生成HTML文件等。插件通过在Webpack配置中引入并实例化，然后将其添加到plugins数组中。

三、使用webpack5搭建脚手架

1.然后执行npm init 进行初始化， npm install webpack webpack-cli

npm init //初始化

 npm install webpack webpack-cli  //安装webpack以及webpack-cli依赖包

查看项目package.json文件 已经有webpack相关版本信息

2.在项目src文件夹下新建main.js和 tools>index.js文件

main文件内容

// mian.js文件
import {add} from '/src/tools/index'
console.log(add(2,3));

修改我们public文件夹下的index.html 文件

在根目录新建 webpack.config.js文件 配置初入口文件信息

//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
  }
}

修改package.json文件 我们创建了webpack的打包命令

现在试着在终端输入 npm run build 命令

npm run build

这里可以看到dist文件夹下已经生成了打包好的文件。

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

3.打包index.html文件

3.1安装插件 npm install html-webpack-plugin -D

npm install html-webpack-plugin -D

在webpack.config.js文件中引入插件，并且配置插件相关信息如下：

现在我们把dist/js下的文件删掉，然后重新打包 可以看到我们已经生成html文件了

4.打包css文件。如果我们想创建一个css呢？

在src>style>style.css 文件

这里是main.js文件，引入样式文件以及向html添加了内容。

//main.js
import './style/style.css'
const el = document.createElement('div')
el.className = 'title'
el.innerHTML = "这是坚强的土豆子"
document.body.appendChild(el)

安装打包css文件的依赖文件 npm install css-loader style-loader

npm install css-loader style-loader

在webpack.congfig文件中配置信息

再次执行 npm run build，然后index.html文件浏览器打开，可以看到我们刚才加载的css效果了。

一些常用的Webpack loader：

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

同理我们如果使用less，也需要先下载less-loader。

新建style.less文件 ，同时哦在main.js文件中引入 文件

//main.js文件添加
import './style/style.less'

webpack.config.js中配置信息。

注意：下图 webpack.config文件less配置信息部分 options默认是部分css3属性需要通过postcss-loader和postcss-preset-env才能添加浏览器兼容性前缀，以确保在不同浏览器上的一致性。

需要先下载安装 postcss-loader和postcss-preset-env

npm install postcss-loader postcss-preset-env -D

执行npm run build ，浏览器打开发现文字内容字体已经按照我们设置的改变了

5.如何处理图像资源呢？

在src>img>下导入一张png图片，并在main.js文件中导入图片在html中显示

在webpack文件中进行配置信息，在webpack4版本中（webpack5版本不用这一步）

npm i file-loader url-loader -D

我们webpack5版本只需要在webpack.config文件中添加配置：

重新打包运行 npm run build ，可以看到我们刚刚加入的图片信息了。

每次运行打包命令后自动覆盖原来的文件js文件信息。

webpack.config.js文件出口文件设置添加clean：设置为true就可以了。这样每次打包后的文件只有一个最新的。

6.babel的转化

es6+的语法在旧浏览器不适用，这就需要我们自己去转化成浏览器能识别的es5代码

Babel7的入门基础知识 Babel 7 实践验证案例

npm install @babel/core @babel/preset-env babel-loader -D

但在高版本的bebel中，我们可以在根目录建一个babel.config.js。webpack.config.js只需要下图配置。

7.处理.vue结尾的文件

新建vue页面，并在main.js中引入

1、下载安装 npm i vue vue-loader -D

2、 配置webpack.config.js文件

重新通过npm run build运行之后,index.html页面成功响应：

8.如何自动运行打包后的index文件

如何使用npm run serve 运行项目的。需要先安装依赖：

npm i webpack-dev-server -D

接下来我们把package.json中的运行命令改成如下这样：

然后我们就可以用npm run serve启动项目了。

可以看到直接访就可以了，我们修改了msg的值，页面会自动刷新。

好啦，我们现在已经成功搭建了一个脚手架。

关于webpack的其他知识后续会更新。

Node.js基础知识请参考：Express基于Node.js基础知识【2】全面总结 推荐-CSDN博客

---