webpack安装与基础命令

最新推荐文章于 2023-05-04 22:57:28 发布
最新推荐文章于 2023-05-04 22:57:28 发布
阅读量218 收藏
点赞数
分类专栏： webpack 前端学习笔记 文章标签： node.js vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/july_29/article/details/120694985
版权
这篇博客介绍了如何从零开始使用webpack。首先需要初始化项目并安装webpack及webpack-cli。接着，在src文件夹内创建入口文件index.js。通过运行webpack命令，可以将源代码打包成dist文件夹内的js文件，不同模式下打包结果有所不同。了解这些基本操作后，开发者就能调用打包后的main.js进行应用部署。
摘要由CSDN通过智能技术生成

在使用webpack之前我们需要把npm安装好。

1.初始化文件夹

npm init -y

2.在开发环境安装webpack和webpack-cli

npm install webpack webpack-cli -D

3.创建一个src文件夹来放我们的资源文件，里面创建一个名为index.js的入口文件，这个入口文件名在package.json中有定义

4.终端输入

webpack --mode development

打包得到一个dist文件，里面包含打包好的js文件，这是开发环境的，可以把development换成production，变为生产环境打包。生产环境打包出来的文件没有注释，如果要恢复之前的格式，可以按下ctrl+alt+L.
之后我们就可以调用打包好的dist文件夹里面的main.js文件了。

戴竹蜻蜓穿过森林_
关注
专栏目录
vue和webpack安装命令详解
08-27
了解并掌握这些基本的安装和配置命令，将有助于提升前端开发的效率和质量。在实际项目中，你可能还需要学习更多关于Vue组件、Webpack的高级配置、Babel转译以及各种插件的使用，这些都是构建高效前端应用不可或缺的...
【webpack基础】Webpack 常用命令总结
06-08
#### 一、Webpack安装与初始化 **全局安装Webpack与Webpack-CLI** ``` npm install webpack webpack-cli -g ``` 在全局范围内安装Webpack和Webpack-CLI，这允许开发者无需在每个项目中单独安装Webpack，简化了...
详解webpack介绍&安装&常用命令
12-09
webpack系列目录 webpack 系列 二：webpack 介绍&安装 webpack 系列 三：webpack 如何集成第三方js库 webpack 系列 四：webpack 多页面支持 & 公共组件单独打包 webpack 系列 五：webpack Loaders 模块加载器 webpack 系列 六：前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板， 最终形态源码见github: https://github.com/ifengkou/webpack-template 正文 Webpack是一款用户打包前端模块的工具，
webpack 介绍 & 安装 & 常用命令
weixin_30951743的博客
09-02 198
webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一：模块系统的演进 webpack 系列 二：webpack 介绍&安装 webpack 系列 三：webpack 如何集成第三方js库 webpack 系列 四：webpack 多页面支持 & 公共组件单独打包 webpack 系列 五：webpack Loaders 模...
webpack安装与命令行
weixin_30502965的博客
03-21 360
我们常规直接使用 npm 的形式来安装： npm install webpack -g 将webpack安装到全局变量 然后新建个文件夹，如webpack-test，通过终端进入该文件夹， npm init 初始化package.json 会出现设置json文件到一些设置项，不用填，一路回车就行 完成后会在webpack-test文件夹里生成一个package.j...
webpack安装命令
心有谦谦结
02-28 2218
一、什么是webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 二、安装 1、全局安装（命令） npm install -g webpack npm install -g webpack-cli 【注】当想要安装多种依赖时，空格分开也可 npm install -g webpack webpack-cli 2、是否安装成功（查看版本号） webpack -v ...
Webpack命令行安装
free_and_strong的博客
08-12 522
Weback命令行安装 npm install webpack -g     //全局安装 npm init       //初始化 npm install –save-dev webpack     //项目目录的安装 –save-dev是在开发中使用，-save要保存到pa...
webpack的安装
最新发布
m0_74176885的博客
05-04 534
当您使用Vue CLI创建项目时，它会自动为您配置和安装所需的依赖项，包括Webpack、babel-loader、CSS和图片加载器等。是用于启动开发服务器，以便在您本地环境中进行开发和测试Vue应用程序，并且不涉及Webpack的安装。是用于全局安装Vue CLI工具，而不是安装Webpack。命令1：npm install -g @vue/cli。命令2：vue create xxxx。命令3：npm run serve。Webpack是在执行第二条命令。
二.Webpack的安装和命令行
小毛驴的博客
10-20 518
Webpack的安装和命令行 1.安装 全局安装webpack npm install webpack -g 查看是否安装，以及安装的版本 webpack -help 建立一个文件后 npm init 在局部安装webpack ...
webpack 安装、卸载的全部命令
书启鸿蒙知秋枫
10-01 3626
【代码】webpack 安装、卸载的全部命令。
webpack更新中-安装命令
weixin_43167546的博客
04-01 616
webpack项目打包工具
webpack的安装和基本命令
ydongabc
11-04 168
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 1.安装 全局安装： $ npm i webpack -g （如需指定版本：$ npm i webpack...
【webpack】 webpack的安装
菜就多练
04-14 3416
1, 新建目录，执行npm init。
webpack安装教程
独孤欢颜的博客
11-18 2455
最好将项目目录下的node-modules一起删除，否则会有残留文件影响下一次的结果，找不到就先执行命令，然后卸载nodejs，并且把nodejs整个安装目录删掉吧。方法是删除(或者修改)C:\Users\Lenovo\.npmrc这个文件和删除C:\Users\Lenovo\.nrmrc。下添加该路径即可正常使用cnpm，我的路径是“D:\soft\cst\nodejs\npm_modules”①使用 npm list vue -g 看看是否还是为空，如果出现版本号，则不用管，安装vue成功。
VueApi-05
Jack94727的博客
07-04 500
Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源？ JS .js .jsx .coffee .ts（TypeScript 类 C# 语言） CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件（Fonts） .svg .ttf .eot...
webpack的安装和配置
zhangjing1019的博客
01-17 385
安装 首先要安装 Node.js， Node.js 自带了软件包管理器 npm 用npm 安装webpack $ npm install webpack -g 此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 查看相关指令 通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack //进入项目目录 //确定已有package
webpack---简单的安装以及命令使用
qq_41962068的博客
09-16 272
webpack的安装和使用 {ignore} 文章目录webpack的安装和使用 {ignore}webpack简介webpack的安装使用 webpack官网：https://www.webpackjs.com/ 目前的最新版本：webpack4 webpack简介 webpack是基于模块化的打包（构建）工具，它把一切视为模块 它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。 webpack的特点： 为前端工程化而生：webpa
WebPack安装
weixin_44229917的博客
04-02 2728
安装webpack首先要安装Node.js，需要用到Node自带的软件包管理工具npm(node package manage) 查看自己的node版本： 全局安装webpack（3.6.0） -g表示全局安装，在终端直接执行webpack命令，使用的全局安装的webpack 挡在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack ...
webpack 安装
qq_37964032的博客
11-26 134
npm innit -y npm install webpack --save-dev 本地安装 安装webpack 或者less 不要全局安装 否则容易导致版本差异 选择Y 安装webpack CLI 命令 bable ES6转译ES5 (兼容低版本浏览器） 一、 安装bable npm install babel-core babel-loader --save-dev bable-core // 转译器 bable-loader //加载解析 语
webpack安装配置与Vue实战指南
"这篇教程详细讲解了如何安装和配置webpack，并通过实际例子展示了与Vue的结合使用。" 在前端开发中，webpack是一个重要的模块化打包工具，它能够处理JavaScript、CSS、图片等静态资源，将它们按依赖关系打包成一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值