webpack基本使用(2)

于 2024-05-15 01:41:25 发布
阅读量363 收藏 4
点赞数 5
分类专栏： 程序员 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84097964/article/details/138878730
版权
前端模块化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lSivUEnL-1617033699861)(Untitled.assets/image-20210329234253502.png)]

和grunt/gulp的对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqVtJvbD-1617033699862)(Untitled.assets/image-20210329234356120.png)]

webpack安装

  • 安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm

  • 查看自己的node版本

node -v

  • 全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本,-g是全局)

npm install webpack@3.6.0 -g

  • 局部安装webpack

  • –save-dev`是开发时依赖，项目打包后不需要继续使用的。

cd 具体目录

npm install webpack@3.6.0 --save-dev

  • 为什么全局安装后，还需要局部安装呢？

  • 在终端直接执行webpack命令，使用的全局安装的webpack

  • 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

简单使用
准备工作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2X7agHSg-1617033699865)(Untitled.assets/image-20210329235034854.png)]

js文件打包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i05o5Pv6-1617033699868)(Untitled.assets/image-20210329235250834.png)]

打包指令和格式：webpack 入口 出口

使用打包后的文件

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84097964
关注
专栏目录
安装指定版本的webpack（windows系统）
weixin_45777300的博客
06-04 3078
开始学习前端的小伙伴可能会用到操作——安装指定版本webpack在终端进行操作，windows电脑可使用快捷键windows+R，输入cmd打开终端，如下： 代码如下： 2.删除本地webpack 代码如下： 该处使用的url网络请求的数据。代码如下： 代码如下： 该处使用的url网络请求的数据。代码如下： 该处使用的url网络请求的数据。代码如下： 该处使用的url网络请求的数据。代码如下： 该处使用的url网络请求的数据。代码如下： 9.检查webpack是否安装成功 代码如下： 总结 windows
webpack基本使用
小小前端攻城狮的博客
03-30 861
什么是Webpack？ 什么是webpack？ 这个webpack还真不是一两句话可以说清楚的。 我们先看看官方的解释： At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 但是它是什么呢？用概念解释概念，还是不清晰。 我们从两个点来解释上面这句话：模块 和 打包 前端模块化 和gr
安装指定版本的webpack、webpack-cli以及@vue/cli-init
kobe_IT的博客
08-08 3679
安装指定版本的webpack、webpack-cli以及@vue/cli-init
webpack的安装
最新发布
qq_52764999的博客
01-09 399
环境准备：nodejs 1、全局安装：（不推荐） 安装：npm install webpack webpack-cli -g 检测版本：webpack –v 卸载：npm uninstall webpack webpck-cli –g。2、项目安装：（推荐） 安装：npm I –D webpack 安装指定版本：npm I –D webpack@<version> 安装最新体验版本：npm I –D webpack@beta。
VUE|最清晰的Webpack讲解
weixin_44455926的博客
02-28 510
什么是webpack？ 1. 什么是webpack？ 这个webpack不是一两句话能够说清楚的。 2. 我们先看看官方的解释 At its core,webpack is a static model bundle for modler JavaScript applications. 从本质上讲，webpack 是一个现代的JavaScript应用的静态模块打包工具 3.但是他是什么...
Webpack:webpack的基本使用，版本是个坑
05-12
在webpack中使用 -S-D 有时会失效，建议使用--save-dev loader 注意loaders的处理顺序是从右到左 // 处理loader module: { loaders: [ { test: /\.css$/, // 注意loader loader: 'style-loader!css-loader', ...
**webpack 基本使用**
08-20
### webpack 基本使用 **webpack** 是一个流行的 JavaScript 模块打包工具，它可以将项目的各种静态资源（包括但不限于 JavaScript、CSS、图片文件等）按照一定的规则进行整合与优化，最终生成可以在浏览器环境中...
webpack基本配置
03-08
在“webpack基本配置”中，我们通常会涉及以下几个关键部分： 1. **入口(entry)**：定义应用程序的起点，Webpack 从这个入口开始递归解析依赖并构建模块图。可以是一个字符串，表示单个入口，也可以是一个对象，...
【webpack】webpack的基本使用
weixin_43655896的博客
02-13 7673
整理了一些webpack4基本的使用
webpack-使用webpack-dev-server.rar
04-12
以上就是关于 `webpack-dev-server` 的基本介绍和使用方法。通过熟练掌握这一工具，你可以更高效地进行前端开发，享受无缝的开发体验。在实际项目中，还可以结合其他工具，如 Babel 转换 ES6+ 语法，或者使用 ...
Webpack安装及简易webpack项目配置（4.0以上版本）
qq_35776434的博客
12-06 1295
一开始照着书上的敲，怎么也run不起来，说缺少webpack-cli。就从网上找“补救方法”，然，在我这里都不管用，索性还是看中文官方文档，瞬间run起来了，舒服。毕竟第一次跑通，记录一下过程。 1.安装最新版node.js和NPM node.js：https://nodejs.org/en/ npm：https://www.runoob.com/nodejs/nodejs-install-...
【webpack】 webpack的安装
菜就多练
04-14 3389
1, 新建目录，执行npm init。
Vue使用日记（12）：webpack详解（一）
jimson_zhu的博客
10-12 190
当下的打包工具有很多：grunt、gulp、roolup（vue就是用它进行构建的）、webpack等等。 这一篇博客主要对webpack进行说明。 webpack是什么？ 官方解释是：At its core, webpack is a static module bundler for modern JavaScript applications. 翻译过来就是：本质上来说，webpa...
webpack指定版本下载安装和卸载
詹大先生的博客
05-10 3781
注意：webpack和webpack-dev-server有版本兼容性的要求 webpack 3.x 要使用 webpack-dev-server 2.x webpack 4.x 要使用 webpack-dev-server 3.x webpack版本查看 webpack -v 全局安装指定版本的webpack（局部安装去掉-g） npm install webpack@4.46.0 -g 全局安装指定版本的webpack-dev-server（局部安装去掉-g） ..
自定义 webpack 安装与配置-02
m0_58893670的博客
03-09 172
在项目根目录下创建 webpack.config.js文件 在该文件内进行配置 // 引入绝对路径模块 const path = require('path') module.exports = { // 入口文件 entry: './src/index.js', // 出口文件 output: { // 指定输出文件的文件名 filename: 'bundle.js', // 文件的输出路径，要设置绝对路径
webpack安装及配置（一）
mitays的博客
12-20 417
目录1. webpack介绍2. webpack的安装2.1 安装node.js 1. webpack介绍 webpack 可以打包所有的资源、脚本、图片、样式、表; 2. webpack的安装 node.jsnpm/cnpmnrm 2.1 安装node.js 在官网下载所需版本的node.js 2.1.2 ...
webpack的安装与使用（保姆级教程）
加油
06-02 6412
webpack的安装与使用保姆级教程目录下会生成一个package.json文件，里面包含一些项目的相关信息 局部安装：（推荐） ps:查看版本号： 假如没有出现版本号，而是出现了电脑配置信息的输入一下代码试试： 问题可参考下面链接： webpack -v没有出现版本号，而是出现了电脑配置信息 可以查看到版本号说明webpack已经按装好了，此时package.json文件也会出现一个依赖： （把安装想成maven引入依赖就很好理解了） 全局安装： 至此，webpack和webpack-cli安装完成。
webpack使用
weixin_45859470的博客
08-23 633
webpack使用-----基础版教程
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
zep
01-26 568
一、认识webpack 什么是webpack？ 这个webpack还真不是一两句话可以说清楚的。 我们先看看官方的解释： At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 但是它是什么呢？用概念解释概念，还是不清晰。 我们从两个点来解释上面这句话：模块 和 打包 前端模块化： 在前面学习中，我已
webpack的基本使用
07-15
html-webpack-plugin是一个Webpack插件，可用于自动生成HTML文件。该插件会根据指定的模板文件生成一个HTML文件，并自动将生成的JS文件注入到该HTML文件中。通过html-webpack-plugin，我们可以方便地为我们的Webpack打包结果生成一个美观的HTML页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值