Webpack(一):基础使用

本文介绍了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文件。

在这里插入图片描述

看下面一张图

在这里插入图片描述

看这个图就很明白了:

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

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

总结就是:modulechunkbundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字:

我们直接写出来的是 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:[<
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值