- 文章目录前言提前准备一、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和静态资源文...
上滑加载中
推荐直播
-
探秘仓颉编程语言：华为开发者空间的创新利器2025/02/22 周六 15:00-16:30
华为云讲师团
本期直播将与您一起探秘颉编程语言上线华为开发者空间后，显著提升开发效率，在智能化开发支持、全场景跨平台适配能力、工具链与生态完备性、语言简洁与高性能特性等方面展现出的独特优势。直播看点： 1.java转仓颉的小工具 2.仓颉动画三方库lottie 3.开发者空间介绍及如何在空间用仓颉编程语言开发
回顾中 -
大模型Prompt工程深度实践2025/02/24 周一 16:00-17:30
盖伦 华为云学堂技术讲师
如何让大模型精准理解开发需求并生成可靠输出？本期直播聚焦大模型Prompt工程核心技术：理解大模型推理基础原理，关键采样参数定义，提示词撰写关键策略及Prompt工程技巧分享。
去报名 -
华为云 x DeepSeek：AI驱动云上应用创新2025/02/26 周三 16:00-18:00
华为云 AI专家大咖团
在 AI 技术飞速发展之际，DeepSeek 备受关注。它凭借哪些技术与理念脱颖而出？华为云与 DeepSeek 合作，将如何重塑产品与应用模式，助力企业数字化转型？在华为开发者空间，怎样高效部署 DeepSeek，搭建专属服务器？基于华为云平台，又该如何挖掘 DeepSeek 潜力，实现智能化升级？本期直播围绕DeepSeek在云上的应用案例，与DTSE布道师们一起探讨如何利用AI 驱动云上应用创新。
去报名
热门标签