webpack超详细教程,学webpack看这一篇就够了!(下)

简介: webpack超详细教程,学webpack看这一篇就够了!(下)

上一篇,我们已经讲解了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命令及其详解!


一、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'
       })
     ]
   }

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

通过上下两篇文章,小伙伴们学会webpack了吗,有什么疑问欢迎小伙伴们在评论区提问!也可以点个关注持续关注博主的文章哦!

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
4月前
|
缓存 前端开发 JavaScript
webpack【实用教程】
webpack【实用教程】
41 0
|
4月前
|
前端开发 JavaScript
webpack 和 babel 实用教程【前端必备】
webpack 和 babel 实用教程【前端必备】
42 0
|
6月前
|
缓存 JSON 前端开发
webpack超详细教程,学webpack看这一篇就够了!(上)
webpack超详细教程,学webpack看这一篇就够了!(上)
|
6月前
|
JSON JavaScript 前端开发
Webpack的ts的配置详细教程
Webpack的ts的配置详细教程
145 0
|
12月前
|
移动开发 JSON 自然语言处理
Vue系列教程(16)- 模块打包器(webpack)
Vue系列教程(16)- 模块打包器(webpack)
88 0
|
JavaScript 前端开发
React全家桶建站教程-Webpack #5
React全家桶建站教程-Webpack #5
97 0
|
JavaScript 前端开发
【TypeScript教程】# 16:ts + webpack + less实现贪吃蛇小游戏
【TypeScript教程】# 16:ts + webpack + less实现贪吃蛇小游戏
152 0
【TypeScript教程】# 16:ts + webpack + less实现贪吃蛇小游戏
|
JavaScript
【TypeScript教程】# 6:使用webpack打包ts代码
【TypeScript教程】# 6:使用webpack打包ts代码
200 0
【TypeScript教程】# 6:使用webpack打包ts代码
|
JavaScript 前端开发 CDN
Vue——11- webpack保姆级教程02
source-map、oneOf、externals、树摇技术、安装jQuery、 对css进行打包压缩以及 code split(代码分割)
156 0
|
存储 缓存 JSON
Vue——10 - webpack打包保姆级教程01
打包js、json、css、less、html、背景图片以及图片、字体(Font)文件,devsever,生产环境配置以及css的兼容写法
411 0