webpack的基本使用

最新推荐文章于 2025-12-25 19:30:23 发布
原创 最新推荐文章于 2025-12-25 19:30:23 发布 · 281 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #html5 #node.js #javascript

webpack的基本使用

创建一个名为time.js的js文件
在这里插入图片描述
再创建一个名为mian.js的js文件，引入time.js中的add、mul函数，形成依赖关系
在这里插入图片描述
在终端用cd命令进入“webpack的起步”这个文件夹，使用webpack命令，将main.js文件打包到新的new.js文件中（这里可以自己名命，执行命令的时候自动生成打包的文件），虽然创建了main和time两个文件，但因为mian中引入了time中的函数，两个文件有依赖关系，在打包的时候会自动识别time文件，因此会一起打包，不用另外写
在这里插入图片描述
（在这里我的文件存放格式是这样的：）
在这里插入图片描述
在html文件中引入打包好的文件
在这里插入图片描述
运行后结果：

在这里插入图片描述

webpack超详细配置, 使用教程(图文)
p312011150的博客
09-18 1375
webpack超详细配置, 使用教程(图文) 原创 2017年05月06日 19:22:14 10163 1 6 博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目; 流程 webpack安
Webpack学习
Lydia
12-07 168
一.webpack本质是 一个Node.js 第三方模块包, 用于分析, 并打包代码 作用: 1.支持所有类型文件的打包 2.支持less /sass=>css 3.支持ES6/7/8=>ES 4.压缩代码 提高浏览速度 环境准备 1.初始化包环境 (也可以用npm) npm init 或者 yarn init npm init -y 文件夹不可以是中文 不可以有空格 否则失效 作用: 生成package.json 文件 :记录包信息 2.安装...
webpack学习
weixin_44434938的博客
07-29 733
webpack学习
Webpack--入门只看这一篇就够了(图文＋代码）
小庄zzz的博客
07-28 2万+
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
webpack看这一篇就够了
热门推荐
一个前端开发者
06-20 6万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
webpack基本使用（基础配置）
Austin的博客
09-04 1339
未完 继续更新，有错误请留言 会及时改正。
**webpack 基本使用**
08-20
### webpack 基本使用 **webpack** 是一个流行的 JavaScript 模块打包工具，它可以将项目的各种静态资源（包括但不限于 JavaScript、CSS、图片文件等）按照一定的规则进行整合与优化，最终生成可以在浏览器环境中...
一文大白话讲清楚webpack基本使用——10——使用CDN优化加载速度
xiaobangkeji的博客
01-22 462
一文大白话讲清楚webpack基本使用——10——使用CDN优化加载速度
一文大白话讲清楚webpack基本使用——18——HappyPack
xiaobangkeji的博客
01-26 1785
一文大白话讲清楚webpack基本使用——18——HappyPack
一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用
xiaobangkeji的博客
01-21 2092
一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用
webpace2+vue2 demo
02-08
linux安装部署请看:http://mp.blog.csdn.net/postedit/79285480 运行命令:npm run dev
webpack入门和实战(一)--webpack配置及技巧
solar_Lan的博客
09-18 5万+
一、全面理解webpack 1、什么是 webpack？        webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack...
webpack实用配置
weixin_34202952的博客
06-16 282
前面的话 　　上文介绍了webpack入门，本文将详细介绍webpack实用配置   版本号 　　以entry.js打包为bundle.js为例，出口的filename可以设置为[id]、[name]、[hash]、[chunkhash]等替换形式，如下所示 var webpack = require('webpack'); module.exports = { entry:...
webpack 面试题整理
好好学习天天向上
05-15 3万+
文章目录webpack 面试题整理谈谈你对Webpack的理解Webpack的打包过程/打包原理/构建流程？Webpack中loader的作用/ loader是什么？常见的loader有哪些？Plugin有什么作用？/Plugin是什么常见的Plugin有哪些Webpack 插件的执行顺序（加载机制）？Webpack中Loader和Plugin的区别Webpack 做过哪些优化手段？有哪些优化手段？tree-shaking 删除没有使用的代码 优化前端性能/提高构建速度使用tree-shaking需要注意什
webpack常见面试题
Debug的博客
10-28 7302
webpack npm run build / serve 之后发生了什么？ 答：脚手架使用webpack来执行配置文件，默认是webpack.config.js或者vue.config.js。然后执行入口文件的js,进行解析处理。 如果是build则生成物理文件存在磁盘上。如果是server的话则将编译的结果存入内存条中。 webpack是干嘛的？定义？解释？ 答：webpack是一个打包工具，前端半自动化开发工具。它是基于nodejs运行的，它的功能有：压缩代码，压缩图片，解析es6,解析sass
webpack的安装与基本使用
weixin_47356255的博客
05-11 435
webpack中文官方文档 一、webpack的基本配置 运行 npm install webpack webpack-cli -D 命令安装webpack 相关的包 在项目的根目录中，创建名为webpack.config.js的webpack配置文件 在webpack的配置文件中，初始化如下基本配置： module.exports={ //编译模式 mode:'development' //development表示开发阶段 production表示生产阶段 } 在package.json配置文
vue devSever中如何配置多个proxy 代理及pathRewrite路径重写
最新发布
Morecans的专栏
12-25 327
最近项目中需要新增人脸等陆的功能，但是后天开发需要用到python，这就使得一个前端根据不同的URL访问两个不同的后端。生成环境使用的是nginx，前端使用的是vue，就琢磨了一下vue devServer中如何配置多个proxy 代理和pathRewrite路径重写。
【Vue知识点总结】.sync修饰符
这是个栗子的博客
12-25 160
sync 修饰符是 Vue 2.3.0+ 新增的一个功能，用于实现父子组件之间的双向数据绑定的语法糖。它本质上是对“子组件触发 update:myPropName 事件，父组件监听并更新数据”这种模式的封装和简化。核心原理：当你使用将父组件的 value 值通过 :propName 传递给子组件。自动为子组件绑定一个名为 update:propName 的事件监听器，该事件触发时会将新的值赋回给父组件的 value。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值