webpack安装及使用

VIP文章 已于 2022-08-28 12:47:05 修改
阅读量624 收藏
点赞数
分类专栏： misc 文章标签： vue
于 2021-06-17 20:01:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/katherin_wanzi/article/details/118000422
版权

一.安装webpack

以管理员身份打开node.js
输入npm install webpack webpack-cli -g下载安装webpack
在这里插入图片描述

二.使用webpack

1.创建如下文件夹

在这里插入图片描述

2.代码部分

hello.js代码：

exports.sayHi = function() {
   
    alert("Hello Webpack!!!");
最低0.47元/天 解锁文章
_enzo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
npm安装与webpack的下载
weixin_38289787的博客
08-07 1691
程序员解决问题就是要快首先--安装其次--使用最后--优化配置淘宝镜像总结感谢点赞 前端开发学习者现在逃不掉的要学npm，今天就来讲一讲如何在PC上安装npm并正常使用。整个过程很简单，无非就是踩坑掉坑填坑。 首先–安装 首先你得通过搜索引擎在形形色色的类似网址中找到一个正确链接，再根据操作系统选择对应安装包。然后傻瓜式安装在对应路径。最后，打开cmd输入npm -v看得到安装的npm版本号表示安装成功了。 其次–使用 打开IDE创建一个很随意的新项目，在Terminal窗口输入npm init -y来初始
webpack安装配置与常见使用过程详解（结合vue）
10-15
主要介绍了webpack安装配置与常见使用过程，主要结合vue实现，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
NSL1020_UWL_Full_WebPack_49.4.4479.exe
11-03
HP NS1020W打印机软件，在HP官方资源下载，保证能够使用。
webpack配置以及下载模块
Raken12的博客
09-25 516
下载 yarn add webpack webpack-cli --dev 练习 参考版本：yarn add webpack@4.41.5 webpack[email protected] --dev 实现步骤： a安装webpack yarn add webpack@4.41.5 webpack[email protected] --dev b 修改package.json文件中的scripts键 “build”: “webpack --mode=production” c 创建src\index.js con
npm install webpack 下载失败
最新发布
q610098308的专栏
02-27 497
1.可以换成国内镜像。
webpack
@追求卓越
10-30 144
webpack是前端的文件打包器
webpack安装教程
独孤欢颜的博客
11-18 1621
最好将项目目录下的node-modules一起删除，否则会有残留文件影响下一次的结果，找不到就先执行命令，然后卸载nodejs，并且把nodejs整个安装目录删掉吧。方法是删除(或者修改)C:\Users\Lenovo\.npmrc这个文件和删除C:\Users\Lenovo\.nrmrc。下添加该路径即可正常使用cnpm，我的路径是“D:\soft\cst\nodejs\npm_modules”①使用 npm list vue -g 看看是否还是为空，如果出现版本号，则不用管，安装vue成功。
Webpack 安装教程
07-29 1194
Webpack 是一个前端资源加载/打包工具。安装 Webpack。
如何成功安装webpack
princess66的博客
11-01 9487
如何成功安装webpack
npm下的vue项目打包-安装webpack
z459382737的博客
07-25 956
如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些，如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些。等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。2.然后在项目根目录中，创建一个webpack.config.js的配置文件用来配置webpack。补充mode设置的是项目的编译模式。将会启动webpack进行项目打包。...
vue和webpack安装命令详解
12-11
一、安装vue相关命令 1、安装vue cnpm install vue  2、安装vue-cli cnpm install -g vue-cli...以上所述是小编给大家介绍的vue和webpack安装命令详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时
Vue.js与Webpack安装教程.pdf
10-29
Vue.js与Webpack安装教程 1 vue.js研究 1 1.1 vue.js介绍 1 1、vue.js是什么？ 1 2、Vue.js与ECMAScript 1 3、Vue.js的使用 2 4、vue.js有哪些功能？ 2 1.2 webpack入门 3 1.2.1 webpack介绍 3 1.2.2 安装webpack 4
Webpack安装时报错解决
01-08
把自己的main.js文件用webpack命令生成另一个bundle.js到自己 新建的dist文件夹里，如根据教程或文档我们使用webpack .\src\main.js .\dist\bundle.js时会报错，而根据的那个教程却没有报错 是因为你们的webpack版本...
安装webpack的完整步骤
heyy1997的博客
11-30 2万+
1.安装node.js 去node.js官网(https://nodejs.org/en/)下载LTS稳定版本，一路傻瓜式安装（具体步骤另行查阅，此处不详述）。安装完成后在cmd界面输入node -v，如果能出现版本号，代表安装成功。 2.配置 找到安装node.js的地址，里面会有node_cache和node_global两个文件。如果没有的话，创建这两个文件夹，然后在cmd中执行npm config set cache “D:\nodejs\node_cache”（此处替换成你本机中node_cac
webpack的安装与使用（保姆级教程）
加油
06-02 4088
webpack的安装与使用保姆级教程目录下会生成一个package.json文件，里面包含一些项目的相关信息 局部安装：（推荐） ps:查看版本号： 假如没有出现版本号，而是出现了电脑配置信息的输入一下代码试试： 问题可参考下面链接： webpack -v没有出现版本号，而是出现了电脑配置信息 可以查看到版本号说明webpack已经按装好了，此时package.json文件也会出现一个依赖： （把安装想成maven引入依赖就很好理解了） 全局安装： 至此，webpack和webpack-cli安装完成。
下载安装webpack
WGTkris的博客
07-20 7019
下载安装webpack的步骤
webpack的下载和使用使用
weixin_50736511的博客
03-07 4947
webpack的下载 打开cmd,检查是否有node环境，只有有node环境才能下载 然后下载 输入 npm install webpack@3.6.0 -g(全局安装) 等待下载就好了 webpack的使用 首先先生成几个文件 首先让webpack编译common.js的代码 在mathfun先简单写几行common.js的代码 var add=function(a,b){ return a+b; } var ride=function(c,d){ return c*d; } mo
VUE-webpack超详细教程
热门推荐
ICanWin_lll的博客
01-21 2万+
一.认识webpack 官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块化和打包两个角度来理解： 模块化： webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转
webpack指定版本下载安装和卸载
詹大先生的博客
05-10 3324
注意：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 下载及安装
07-24
要下载和安装 webpack，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了 Node.js。您可以在命令行中运行 `node -v` 来检查是否已安装。如果未安装，请前往 Node.js 的官方网站（https://nodejs.org/）下载并安装最新版本。 2. 安装完成后，您可以使用 npm（Node 包管理器）来安装 webpack。在命令行中运行以下命令： ``` npm install -g webpack ``` 这将全局安装 webpack。 3. 如果您使用的是 webpack 4 或更高版本，还需要安装 webpack-cli。运行以下命令进行安装： ``` npm install -g webpack-cli ``` 4. 安装完成后，您可以创建一个新的项目文件夹，并在其中初始化一个新的 npm 包。在命令行中导航到您想要创建项目的文件夹，并执行以下命令： ``` npm init -y ``` 这将使用默认设置初始化一个新的 npm 包。 5. 接下来，您需要在项目中安装 webpack 和其他相关的依赖项。运行以下命令进行安装： ``` npm install webpack webpack-cli --save-dev ``` 这将在项目中安装 webpack 和 webpack-cli，并将其作为开发依赖项保存到 package.json 文件中。 6. 安装完成后，您可以创建一个 webpack 的配置文件。在项目根目录下创建一个名为 `webpack.config.js` 的文件，并在其中配置 webpack 的选项。 7. 配置文件创建完毕后，您可以在命令行中运行 webpack 命令来构建项目。例如，运行以下命令来构建项目的入口文件（默认为 `src/index.js`）： ``` webpack ``` 这将根据 webpack 配置文件中的设置，将项目打包到指定的输出目录（默认为 `dist/main.js`）。 这样，您就完成了 webpack 的下载和安装过程。您可以根据自己的需求进一步配置 webpack，并使用其强大的功能来构建和优化您的前端项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值