前端-注入环境变量 前端-注入环境变量# 需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效 （在开发模式下开发者可以借助控制台打印来观察代码效果，而生产模式下用户不需要看控制台的打印） 问题：cross-env设置的只在Node.js环境生效，前端代码无法访问process.env.NODE_ENV，所以没办法通过它来设置 解决 ：使用Webpack内置的 DefinePlugin 插件 webpack.config.js配置插件 //DefineP...

Webpack打包模式 打包模式# 打包模式 ：告知Webpack使用相应模式的内置优化 分类： 模式名称 模式名字 特点 场景 开发模式 ...

Webpack搭建开发环境 Webpack搭建开发环境# 问题：之前改代码，需要重新打包才能运行查看，效率很低 开发环境 ：配置 webpack-dev-server 快速开发应用程序 作用：Web服务，自动检测代码变化，热更新到网页 注意：dist目录和打包内容是在内存里（更新快） 步骤： 下载webpack-dev-server软件包到当前项目 设置模式为开发模式，并配置自定义命令 使用npm run de...

案例-用户登录-完成功能 案例-用户登录-完成功能# 需求：完成登录功能的核心流程，以及Alert警告框使用 步骤： 使用npm下载axios(体验npm作用在前端项目中) 准备并修改utils工具包源代码导出实现函数 导入并编写逻辑代码，打包后运行观察效果 npm下载axios npm i axios 将之前写好的request.js及alert.js放入utils 模块化开发每个模块作用域是独立...

Webpack打包图片 Webpack打包图片# 资源模块 ：Webpack5 内置 资源模块（字体，图片等）打包，无需额外loader 步骤： 配置webpack.config.js让Webpack拥有打包图片功能 打包观察效果 asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现 ...

webpack打包css webpack打包css# 注意：Webpack默认只识别js代码 加载器css-loader ：解析css代码 加载器style-loader ：把解析后的css代码插入到DOM 步骤： 准备css文件代码引入到src/login/index.js中（压缩转译处理等） 下载css-loader和style-loader本地软件包 ...

webpack自动生成html webpack自动生成html# 插件html-webpack-plugin ：在Webpack打包时生成html文件 步骤： 下载html-webpack-plugin插件 配置webpack.config.js让Webpack拥有插件功能 重新打包观察效果 html-webpack-plugin插件使用# 以案例03heima_TouTiao项目为例 下载软件包 ...

案例-用户登录-长度判断 案例-用户登录-长度判断# 以黑马头条项目为例 需求：点击登录按钮，判断手机号和验证码长度 步骤： 准备用户登陆页面 编写核心js逻辑代码 打包并手动复制网页到dist下，引入打包后的js，运行 核心：Webpack打包后的代码，作用在前端网页中使用 准备工作# 项目文件夹： heima_TouTiao ...

Webpack修改打包出入口 Webpack修改打包出入口# 有时我们不希望在打包时默认入口是src/index.js，或者默认出口为dist/main.js 所以需要修改打包入口或出口 Webpack配置 ：影响Webpack打包过程和结果 比如修改入口： 步骤： 项目根目录，新建 webpack.config.js 配置文件 ...

Webpack初体验 Webpack初体验# 本质上，webpack是一个用于现代js应用程序的 静态模块打包工具 当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图（dependency graph） ，然后将项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示内容 静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文...