Webpack（一）：基础使用_we'b'pack-优快云博客

本文链接：https://blog.youkuaiyun.com/zxcbnm7089/article/details/113359090

本文介绍了Webpack的基础概念和工作方式，详细讲解了Webpack的配置过程，包括开发环境和生产环境的配置，以及如何处理各种资源如JS、CSS、HTML、图片等。通过配置文件webpack.config.js，学习如何配置entry、output、module、plugin、resolve和devServer参数，以实现模块打包和优化。同时，文中还提到了开发和生产环境的不同处理策略，如CSS提取、压缩和ES6转译等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章有参看其他博主文章，本文章仅作用于简单回顾使用，不能作为新手入门教程

http://www.woc12138.com/article/45
https://segmentfault.com/a/1190000006178770
https://www.cnblogs.com/joyco773/p/9049693.html
https://www.jianshu.com/p/941bfaf13be1/
https://www.cnblogs.com/minghui007/p/7390247.html

一、概念

1.什么是webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)
在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)

2.webpack的工作方式

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

在这里插入图片描述

看下面一张图

在这里插入图片描述

看这个图就很明白了：

对于一份同逻辑的代码，当我们手写下一个一个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module ；
当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作；
webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。

一般来说一个 chunk 对应一个 bundle，比如上图中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如说上图中，我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。

总结就是：module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：

我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。

3.webpack的5个核心概念

概念	说明
Entry	入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图
Output	输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名
Loader	加载器(Loader)：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解JS)
Plugins	插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
Mode	模式(Mode)：指示 webpack 使用相应模式的配置

Mode模式：

选项	描述
development	将 process.env.NODE_ENV 的值设置为 development。此模式是能让代码本地调试运行的环境。启用的插件：NamedChunksPlugin 和 NamedModulesPlugin
production	将process.env.NODE_ENV 的值设置为 production。能让代码优化上线运行的环境启用的插件：FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。

二、基本入门

1.初始化配置

初始化 package.json：npm init

npm init

2.安装依赖

webpack4以上的版本需要全局/本地安装webpack-cli

全局安装：

npm install webpack webpack-cli -g

在当前项目目录安装：

npm install --save webpack webpack-cli

3.创建项目

项目基本目录结构如下：

在这里插入图片描述

创建一个index.js文件作为入口文件，放在src目录下：

// 先只打印一行内容
console.log('初次使用webpack');

然后使用命令进行编译：

// 这行命令的意思就是:
// 编译  这个目录        输出到  这个目录下      使用环境为开发环境
webpack ./src/index.js -o ./build/built.js --mode=development
// 注意：新版的webpack输出目录可以不指定文件名，默认会生成一个main.js
webpack ./src/index.js -o ./build --mode=development

最后在build目录下生成了一个main.js

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is not neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => {
   
    // webpackBootstrap
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements:  */
eval("console.log('初次使用webpack');\n\n//# sourceURL=webpack://webpack_use/./src/index.js?");
/******/ })();

总结：

webpack 本身能处理 js/json 资源，不能处理 css/img 等其他资源
生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化，但是不能处理 ES6 的基本语法转化为 ES5（需要借助 loader）
生产环境会压缩js代码，而开发环境更多的是调试信息

三、webpack开发环境的配置

上面的步骤仅仅是只处理了js代码，由于webpack自身就能编译处理基本的js资源，所以无需额外的配置，但是如果处理css,img等就需要loader或者plugin了

1.wepack的配置文件

webpack.config.js 是 webpack 的配置文件，作用：

指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
所有构建工具都是基于 nodejs 平台运行的，模块化默认采用 commonjs。
配置文件的命名必须是webpack.config.js，也许在未来的版本可能会支持自定义命名

2.开发环境的配置方面

开发环境配置主要是为了能让代码运行，并获得更多的调试信息。主要考虑以下几个方面：

打包样式资源
打包 html 资源
打包图片资源
打包其他资源
devServer

3.处理各项资源

3.1打包JS资源

创建webpack.config.js文件，位于项目根目录下，然后配置一下选项

// 引入Node核心模块path,用来处理路径
const path = require ('path');

module.exports = {
   
   
    // 指定入口文件
    entry: './src/index.js',
    // 输出配置参数
    output: {
   
   
        // 输出的文件名
        filename: 'main.js',
        // 输出路径
        path: path.resolve(__dirname,'build/js')
    },
    // 指定运行环境
    mode: 'development'
};

使用webpack命令进行编译，可以看到成功的编译了js文件，无需任何配置

在这里插入图片描述

3.2打包css资源

在css目录下新建一个mystyle.css文件，然后输入一下代码

div {
   
   
    width: 200px;
    height: 200px;
    background-color: skyblue;
}

在index.js中引入css样式

import './css/mystyle.css'

安装css-loader,style-loader,此loader可以处理css资源，不安装会导致编译报错

npm install --save css-loader style-loader

修改webpack.config.js，增加module参数

module.exports = {
   
   
    ...
    // loader选项配置
    module: {
   
   
        rules: [{
   
   
            // 表示要处理css资源，匹配css文件名后缀
            test: /\.css/,
            // 要使用的loader,注意：这里loader的执行顺序为数组的倒序
            // 使用多个Loader用use声明
            use:['style-loader','css-loader']
        }]
    }
}

当控制台输出webpack compiled successfully in 315 ms，说明打包css资源成功

同样的打包less资源需要引入Less-loader即可

// 使用命令安装less-loader
npm install --save less=loader

// 修改webpack配置项
module.export = {
   
   
    ...
   // loader选项配置
    module: {
   
   
        rules: [
            ...
            ,{
   
   
            // 匹配Less文件
            test: /\.less/,
            //使用less-loader
            use:['less-loader']
        }]
    }
}

3.3打包html资源

在html文件夹下新建一个index.html，里面不需要放置任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

安装html-webpack-plugin

npm install --save html-webpack-plugin

修改配置文件

// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 创建插件并指定模板
module.exports = {
   
   
    ...
    // 插件配置参数
    plugins:[
        new htmlWebpackPlugin({
   
   
            template: './src/html/index.html'
        })
    ]
}

然后执行webpack命令，打包完成后到build目录下查看index.html，发现已经自动引入了js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<script src="main.js"></script>
</body>
</html>

所以这个插件的作用就是帮助我们自动引入Js,css等，无需手动引入

3.4打包图片资源

在index.html中引入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="../images/Angel.png" alt="">
</body>
</html>

由于在html中引入img图片在编译后会发生路径错误问题，导致解析不到图片，所以需要借助Loader来帮助我们处理图片资源

安装html-loader,url-loader,file-loader

npm install --save html-loader url-loader file-loader

配置loader

module.export = {
   
   
    ...,
    modules:{
   
   
    	rules:[<