webpack超详细教程，学webpack看这一篇就够了！（下）

前端菜鸟的自我修养

已于 2024-05-03 00:23:57 修改

阅读量625

点赞数 21

分类专栏：前端工程搭建 node.js与webpack 文章标签： webpack 前端 node.js npm javascript

于 2024-05-02 23:59:31 首次发布

本文链接：https://blog.csdn.net/2301_78542842/article/details/138402844

版权

前端工程搭建同时被 2 个专栏收录

13 篇文章 2 订阅

订阅专栏

node.js与webpack

9 篇文章 1 订阅

订阅专栏

上一篇，我们已经讲解了webpack的基本概念、修改出入口、压缩代码和自动生成HTML、以及各种格式文件的打包.......

学webpack看这一篇就够了！（上）

今天，我们来讲一讲webpack进阶的知识，例如【通过webpack搭建开发环境】【注入环境变量】【设置解析别名路径】等等，一起学起来吧~（喜欢的朋友们收藏+关注哦）

PS：因为webpack是建立在node.js的基础上，如果小伙伴们对node.js还不熟悉的，欢迎先去查看我之前发布的node.js相关文章

Node.js安装及环境配置，详细简单易懂

node.js中的fs模块，读写语法讲解

node.js中path模块-路径处理，语法讲解

细讲Node.js模块化，以及 CommonJS 标准语法导出和导入，详细简单易懂！

ECMAScript标准的两种语法--默认导出导入与命名式导出导入

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

npm命令：常用npm命令及其详解！

2、如何设置影响 Webpack--两种方式

2.1 在 webpack.config.js 配置文件设置 mode 选项

2.2 在 package.json 命令行设置 mode 参数

2.2 配置解析别名：在 webpack.config.js 中设置

2.3 这样我们以后，引入目标模块写的路径就更简单了

2.4 修改代码的路径后，重新打包观察效果是否正常！

4.1 在 html 中引入第三方库的 CDN 地址并用模板语法判断

4.2 配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

4.3 两种模式下打包观察效果

一、Webpack 搭建开发环境

1、背景

1.1 每次改动代码，都要重新打包，很麻烦，所以这里给项目集成 webpack-dev-server 开发服务器，快速开发应用程序

1.2 作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

2、实现步骤

2.1 下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

2.2 配置自定义命令，并设置打包的模式为开发模式

// ...

module.exports = {
  // ...
  mode: 'development'
}

"scripts": {
  // ...
  "dev": "webpack serve --mode=development"
},

2.3 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果

在 js / css 文件中修改代码保存后，会实时反馈到浏览器

3、总结

启动 Webpack 开发服务器，会启动一个 Web 服务，实时检测代码变化重新打包，并快速反应最新效果到浏览器页面上

二、Webpack 打包模式

1、分类

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替换等	本地开发
生产模式	production	压缩代码，资源优化，更轻量等	打包上线

2、如何设置影响 Webpack--两种方式

2.1 在 webpack.config.js 配置文件设置 mode 选项

// ...

module.exports = {
  // ...
  mode: 'production'
}

2.2 在 package.json 命令行设置 mode 参数

"scripts": {
  "build": "webpack --mode=production",
  "dev": "webpack serve --mode=development"
},

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

3、两种打包模式的区别

开发模式注重代码热替换更快，让开发调试代码更便捷

生产模式注重项目体积更小，更轻量，适配不同的浏览器环境

三、Webpack 前端注入环境变量

使用 Webpack 内置的 DefinePlugin 插件，实现在编译时，将前端代码中匹配的变量名替换为值或表达式。从而实现前端项目中，开发模式下打印语句生效，生产模式下打印语句失效这样的效果

配置 webpack.config.js 中给前端注入环境变量，代码示例：

// ...
const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

四、Webpack 设置解析别名路径

1、目标

创建 import 或 require 的别名，来确保模块引入变得更简单

2、实现步骤

2.1 原来路径如下

import { checkPhone, checkCode } from '../src/utils/check.js'

2.2 配置解析别名：在 webpack.config.js 中设置

// ...

const config = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

路径中的 '@' 符号代表什么意思？

看在 webpack 配置中的别名路径是什么，就会在打包时替换成哪个路径使用

2.3 这样我们以后，引入目标模块写的路径就更简单了

import { checkPhone, checkCode } from '@/utils/check.js'

2.4 修改代码的路径后，重新打包观察效果是否正常！

五、优化-CDN使用

1、目标

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

2、使用CDN

2.1 cdn定义

内容分发网络，指的是一组分布在各个地区的服务器

2.2 cdn作用

把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取。

好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略。

3、实现需求的思路图

假设我们之前发送请求时通过下载axios的npm包来实现，那么下面这张图的思路就是换成了----在生产模式下是通过引入axios的cdn链接来实现，这样做能够减少自身的体积，提升响应性能

4、具体步骤

4.1 在 html 中引入第三方库的 CDN 地址并用模板语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

4.2 配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

// 生产环境下使用相关配置
   if (process.env.NODE_ENV === 'production') {
     // 外部扩展（让 webpack 防止 import 的包被打包进来）
     config.externals = {
       // key：import from 语句后面的字符串
       // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
       'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
       'axios': 'axios'
     }
   }

   // ...
   const config = {
     // ...
     plugins: [
       new HtmlWebpackPlugin({
         // ...
         // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用
         useCdn: process.env.NODE_ENV === 'production'
       })
     ]
   }