webpack打包及vue项目创建

最新推荐文章于 2023-08-10 16:46:37 发布
最新推荐文章于 2023-08-10 16:46:37 发布
阅读量405 收藏 1
点赞数 1
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64956326/article/details/123227091
版权
本文介绍了如何使用webpack打包JavaScript代码，通过示例详细解释了如何从命令行执行webpack命令，将example.js打包成app.js，并在HTML中引用。此外，还阐述了Vue项目的创建过程，包括使用vue init命令初始化项目，进入项目目录并运行npm run dev启动本地服务器，最后在浏览器中预览项目完成情况。
摘要由CSDN通过智能技术生成

一、webpack打包

自己的js代码：

此时，就用到了webpack的功能了，在终端输入（PS：先进入到代码所在文件目录）webpack example.js -o app.js ~便将example.js打包到了同一文件下的app.js中了

此时，在html文件中直接引用app.js文件就可以了。

使用开发者工具看到控制台,可以看到结果3输出。

 

二、vue项目创建 

进入要创建vue项目的目录下进行项目创建，终端输入：vue init webpack firstvueproject 

最低0.47元/天 解锁文章
mx_0410
关注
使用webpack搭建一个VUE工程项目
qq_41876727的博客
09-30 256
使用webpack搭建一个VUE工程项目`webpack` 工作原理构建一个`webpack`工作环境over若有问题，敬请指教！ webpack 工作原理 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每...
使用webpack创建vue项目
gdyhvy的博客
05-14 766
创建空文件夹 文件夹下执行：npm init 安装 webpack webpack-dev-server vue vue-loader npm i webpack-dev-server vue vue-loader 创建目录结构 main.js 中添加代码 //main.js import {createApp} from "vue"; import App from './app' const app = createApp(App) app.mount('#app') 在..
WebPack创建vue项目
qq_38946351的博客
06-08 177
官网下载 node.js 打开窗口命令行 可以先查看自己的npm版本 然后下载安装cnpm（镜像） npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli 下载成功查看 初始化Vue项目（脚手架） 运行项目 安装（下载）依赖 ...
webpack 创建VUE项目
最新发布
G_whang的博客
08-10 1094
下载地址：https://nodejs.org/en/进入 到新建项目中，然后输入命令 初始化。下载完成以后点击安装，全部下一步即可。全局安装webpack 输入命令。安装完成后输入命令 查看。至此，创建vue项目完成。安装完成，输入命令验证。安装完成输入命令验证。
使用webpack打包后的vue项目如何正确运行（express）
10-17
在现代前端开发中，Webpack 是一个非常重要的模块打包工具，它可以将 Vue.js 项目中的各种资源文件（如 JavaScript、CSS、图片等）进行编译、优化，并打包成可部署的静态资源。Vue 项目经过 Webpack 打包后，通常会...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Webpack 是一款强大的模块打包工具，常用于前端开发中，它能够将 Vue.js 项目中的各种资源（如 JavaScript、CSS、图片等）进行处理和优化，最终打包成静态资源。Vue 项目通过 Webpack 打包后，会在项目根目录下生成...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
本文将详细介绍如何使用Webpack 4和Vue来搭建一个Vue-cli项目，从而实现快速开发Vue应用。 首先需要了解，Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。它将应用程序中所需的各个模块...
webpack创建vue项目
沙漏的前端笔记
05-12 168
写在前面：以前都是用的vue创建项目，新公司要求使用webpack创建项目，记录下来以防忘记 * 使用之前请先确认安装了node.js，不会安装请自行百度 安装vue-cli vue2.x npm install -g vue-cli 卸载 npm uninstall -g vue-cli 最新版本vue-cli npm install -g @vue/cli 卸载 npm uninstall -g @vue/cli 查看是否安装成功 // 注意 -V 的 V 是大写 vue -V vue -
使用webpack创建vue前端项目
weixin_43934513的博客
08-25 465
使用webpack创建vue前端项目 一.安装Node.js 1、由于vue项目是依赖Node.js的，需要安装Node.js。 Node.js官网下载 等待下载完成，双击安装包按步骤即可，这里安装位置为D:/nodejs。 2、执行命令echo %PATH%检查是否存在安装路径。 安装Node.js后，会自带npm。执行node -v和npm -v检查node.js和npm的版本。 3、接下来配置npm的本地仓库。 在nodejs目录下新建两个目录：node_cache 和 node_globa
webpack构建vue项目
Angela
10-28 2959
众所周知，vue运行及打包命令：npm run dev 、npm run build.vue脚手架工程，每次只能运行一个服务，如果有两个工程，需要两套vue脚手架，同理，有10套工程就要10套vue脚手架。楼主工作中遇到的情况就是如此，由于项目的需要，产品的不同模块对应后端不同的打包地址，因此，前端就需要将不同的页面进行打包，进而衍生出多个vue工程。请看下图...
WebPack搭建vue项目
ordinary_lc的博客
01-10 1522
手动搭建vue项目 创建文件夹 vue-pro,进入文件夹进行npm包管理初始化 npm init 按照终端要求进行配置项目的page.json文件 配置完成会发现文件夹内有了一个page.json文件 在项目本地安装webpack打包工具，进行项目内模块化开发 npm install webpack --save-dev 在项目内进行创建文件，并测试webpack打包工具，这里对webpack进行配置，实现自定义npm ru
使用webpack搭建vue项目；webpack+vue
weixin_57265841的博客
04-10 4935
使用webpack搭建vue项目;webpack+vue
webpack创建一个vue项目方法
bingmo_的博客
03-14 2692
具体步骤：https://blog.csdn.net/weixin_42176858/article/details/88025642?spm=1001.2014.3001.5502 安装路径：https://www.cnblogs.com/goldlong/p/8027997.html 1.安装cnpm国内镜像,提升速度。输入如下命令： npm install -g cnpm --registry=http://registry.npm.taobao.org 2.安装vue-cli（用户生成Vue工程模板
webpack+vue 创建项目
qq_33745501的博客
04-26 430
本文使用webpack+vue创建项目。本文基于wenpack4.6.0、vue2.x 、node.js 8.11.0.由于代码中会使用es6的语法，因此需要babel转码器。1.创建项目。npm init2.本地安装如下插件。安装完后package.json如下所示：{ "name": "single-project", "version": "1.0.0", "descriptio...
使用webpack脚手架创建一个vue项目
Smell_rookie的博客
06-08 1681
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目 前言介绍 创建vue的项目方式有很多种，这里仅介绍使用webpack脚手架来创建一个vue项目，下面将创建一个movie为例的项目。 前期环境准备 第一步 ：安装好npm、node 从官网下载本机对应的npm版本和node版本，这里不做介绍。安装完成后检查是否安装成功。 检验方法：打开控制命令行程序-》cmd,输入node...
webpack创建vue项目并安装vuex
_小郑有点困了的博客
04-16 810
webpack创建vue项目并安装vuex 首先我是已经全局安装了vue-cli，以及node，webpack，webpack-cli，尽量使用cnpm比较好。 1，创建项目，vue init webpack name 大致选择如下： 2，可能成功，可能不成功，有时候会卡住在chorme啥的，但是我发现直接退出，cd进去之后，npm run dev也能运行项目： 2.1 2.2，控制台npm ...
使用webpack打包创建vue-toast插件全攻略
总结，本文通过实际操作讲解了如何使用webpack打包一个Vue Toast插件，涉及了webpack配置、Vue组件的创建和打包过程，以及如何在项目中使用这个自定义插件。这个过程对于开发者来说是理解webpack工作原理和自定义Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值