- 文章目录前言提前准备一、Babel模块(解决js的语法问题)1.1、初识Babel1.2、本地使用Babel二、webpack(核心：解决模块问题)2.1、介绍webpack2.2、初次接触(将有模块引入的两个js文件进行打包)核心一二：entry与output(入口与出口)核心三：loaders介绍loadersbabel-loader+@babel/ployfill(前者用于连接webpack 文章目录前言提前准备一、Babel模块(解决js的语法问题)1.1、初识Babel1.2、本地使用Babel二、webpack(核心：解决模块问题)2.1、介绍webpack2.2、初次接触(将有模块引入的两个js文件进行打包)核心一二：entry与output(入口与出口)核心三：loaders介绍loadersbabel-loader+@babel/ployfill(前者用于连接webpack
- 作者是名退役复学在校大学生，对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究，欢迎关注，和我一起交流。今天手把手教学webpack，奶爸级教学，一键三连收藏起来吧。目录一、webpack二、前端模块化1、传统的开发模式2、使用ES6模块化3、使用CommonJS规范三、webpack配置文件四、项目管理文件五、webpack的l... 作者是名退役复学在校大学生，对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究，欢迎关注，和我一起交流。今天手把手教学webpack，奶爸级教学，一键三连收藏起来吧。目录一、webpack二、前端模块化1、传统的开发模式2、使用ES6模块化3、使用CommonJS规范三、webpack配置文件四、项目管理文件五、webpack的l...
- 注意：有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页面的解析运行cnpm i vue -S将vue安装为运行依赖；运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；运行cn... 注意：有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页面的解析运行cnpm i vue -S将vue安装为运行依赖；运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；运行cn...
- Webpack解决了哪些问题 在网页中会引用哪些常见的静态资源？JS (.js .jsx .coffee .ts（TypeScript 类 C# 语言）)CSS (.css .less .sass .scss)Images (.jpg .png .gif .bmp .svg)字体文件（Fonts）(.svg .ttf .eot .woff .... Webpack解决了哪些问题 在网页中会引用哪些常见的静态资源？JS (.js .jsx .coffee .ts（TypeScript 类 C# 语言）)CSS (.css .less .sass .scss)Images (.jpg .png .gif .bmp .svg)字体文件（Fonts）(.svg .ttf .eot .woff ....
- 实现自动打开浏览器、热更新和配置浏览器的默认端口号⚠️注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！ 方式1修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新："dev": "webpack-dev-server --hot --port 4... 实现自动打开浏览器、热更新和配置浏览器的默认端口号⚠️注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！ 方式1修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新："dev": "webpack-dev-server --hot --port 4...
- @TOC 1.认识webpackwebpack是一个现代的JavaScript应用的静态模块打包工具1.模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是Ja... @TOC 1.认识webpackwebpack是一个现代的JavaScript应用的静态模块打包工具1.模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是Ja...
- Vue2前端模块化一、Es6的模块化实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 加上了module就不用担心命名冲突的情况 --> <!-- 但使用module的script标签默认发出cors跨域请求--> <scr... Vue2前端模块化一、Es6的模块化实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 加上了module就不用担心命名冲突的情况 --> <!-- 但使用module的script标签默认发出cors跨域请求--> <scr...
- vue.config.js配置项vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建创建vue.config.jsvue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你... vue.config.js配置项vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建创建vue.config.jsvue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你...
- 1. 生产环境遇到的问题 2. 什么是 Source Map 3. webpack 开发环境下的 Source Map 3.1 默认 Source Map 的问题 3.2 解决默认 Source Map 的问题 4. webpack 生产环境下的 Source Map 4.1 只定位行数不暴露源码 4.2 定位行数且暴露源码 5. Source Map 的最佳实践 1. 生产环境遇到的问题... 1. 生产环境遇到的问题 2. 什么是 Source Map 3. webpack 开发环境下的 Source Map 3.1 默认 Source Map 的问题 3.2 解决默认 Source Map 的问题 4. webpack 生产环境下的 Source Map 4.1 只定位行数不暴露源码 4.2 定位行数且暴露源码 5. Source Map 的最佳实践 1. 生产环境遇到的问题...
- 📢📢📢📢📢📢💗 你正在阅读 【梦想橡皮擦】 的博客👍 阅读完毕，可以点点小手赞一下🌻 发现错误，直接评论区中指正吧📆 橡皮擦的第 621 篇原创博客 ⛳️ webpack 原理说明webpack 是前端程序员用来进行打包 JS 的技术，打包之后的代码特征非常明显，例如下述代码。(window.webpackJsonp = window.webpackJsonp || []... 📢📢📢📢📢📢💗 你正在阅读 【梦想橡皮擦】 的博客👍 阅读完毕，可以点点小手赞一下🌻 发现错误，直接评论区中指正吧📆 橡皮擦的第 621 篇原创博客 ⛳️ webpack 原理说明webpack 是前端程序员用来进行打包 JS 的技术，打包之后的代码特征非常明显，例如下述代码。(window.webpackJsonp = window.webpackJsonp || []...
- 一、前言项目应用element-ui，有切换主题色的需要。但官方的方式，有几个问题：1、需要下载整个element-ui的样式css，并替换其中的css样式颜色。文件较大，下载慢且影响性能。2、只能替换element-ui本身的颜色样式，项目中自己写的颜色样式替换不掉。3、全部的element-ui样式都重新覆盖，渲染较慢，且容易导致覆盖已有样式出现意外问题。其实带颜色的样式规则只占了所有... 一、前言项目应用element-ui，有切换主题色的需要。但官方的方式，有几个问题：1、需要下载整个element-ui的样式css，并替换其中的css样式颜色。文件较大，下载慢且影响性能。2、只能替换element-ui本身的颜色样式，项目中自己写的颜色样式替换不掉。3、全部的element-ui样式都重新覆盖，渲染较慢，且容易导致覆盖已有样式出现意外问题。其实带颜色的样式规则只占了所有...
- 一、前言hash代表compilation的hash值。compilation在项目任何一个文件改动后就会被重新创建，然后webpack计算新的compilation的hash值。chunkhash 代表chunk的hash,模块发生改变才会重新生成hash。contenthash 解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-pl... 一、前言hash代表compilation的hash值。compilation在项目任何一个文件改动后就会被重新创建，然后webpack计算新的compilation的hash值。chunkhash 代表chunk的hash,模块发生改变才会重新生成hash。contenthash 解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-pl...
- 一、前言项目应用element-ui，有切换主题色的需要。但官方的方式，有几个问题：1、需要下载整个element-ui的样式css，并替换其中的css样式颜色。文件较大，下载慢且影响性能。2、只能替换element-ui本身的颜色样式，项目中自己写的颜色样式替换不掉。3、全部的element-ui样式都重新覆盖，渲染较慢，且容易导致覆盖已有样式出现意外问题。其实带颜色的样式规则只占了所有... 一、前言项目应用element-ui，有切换主题色的需要。但官方的方式，有几个问题：1、需要下载整个element-ui的样式css，并替换其中的css样式颜色。文件较大，下载慢且影响性能。2、只能替换element-ui本身的颜色样式，项目中自己写的颜色样式替换不掉。3、全部的element-ui样式都重新覆盖，渲染较慢，且容易导致覆盖已有样式出现意外问题。其实带颜色的样式规则只占了所有...
- 我的前端之路笔记cdn资源 cdn资源webpack官网webpack插件 webpack笔记解决作用域问题快速执行函数;(function(){…})解决代码拆分问题nodecommonjs模块化解决浏览器支持问题requirejs想要主js调用别的js要在主js前引入hello.jsexport hello()main.jshello()import hello.jsimport ma... 我的前端之路笔记cdn资源 cdn资源webpack官网webpack插件 webpack笔记解决作用域问题快速执行函数;(function(){…})解决代码拆分问题nodecommonjs模块化解决浏览器支持问题requirejs想要主js调用别的js要在主js前引入hello.jsexport hello()main.jshello()import hello.jsimport ma...
- 可以说现在但凡开发Single page application，webpack是一个不可或缺的工具。WebPack可以看做是一个模块加工器，如上图所示。它做的事情是，接受一些输入，经过加工产生一些输出。输入是我们web前端项目的模块文件，通常情况下这些文件都不能直接被浏览器的JavaScript执行引擎所执行。输出是经过webpack加工后的能被浏览器使用的javascript和静态资源文... 可以说现在但凡开发Single page application，webpack是一个不可或缺的工具。WebPack可以看做是一个模块加工器，如上图所示。它做的事情是，接受一些输入，经过加工产生一些输出。输入是我们web前端项目的模块文件，通常情况下这些文件都不能直接被浏览器的JavaScript执行引擎所执行。输出是经过webpack加工后的能被浏览器使用的javascript和静态资源文...
上滑加载中
推荐直播
-
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中 -
码道新技能，AI 新生产力——从自动视频生成到开源项目解析2026/04/08 周三 19:00-21:00
童得力-华为云开发者生态运营总监/何文强-无人机企业AI提效负责人
本次华为云码道 Skill 实战活动，聚焦两大 AI 开发场景：通过实战教学，带你打造 AI 编程自动生成视频 Skill，并实现对 GitHub 热门开源项目的智能知识抽取，手把手掌握 Skill 开发全流程，用 AI 提升研发效率与内容生产力。
回顾中 -
华为云码道：零代码股票智能决策平台全功能实战2026/04/18 周六 10:00-12:00
秦拳德-中软国际教育卓越研究院研究员、华为云金牌讲师、云原生技术专家
利用Tushare接口获取实时行情数据，采用Transformer算法进行时序预测与涨跌分析，并集成DeepSeek API提供智能解读。同时，项目深度结合华为云CodeArts（码道）的代码智能体能力，实现代码一键推送至云端代码仓库，建立起高效、可协作的团队开发新范式。开发者可快速上手，从零打造功能完整的个股筛选、智能分析与风险管控产品。
回顾中
热门标签