从零开始学VUE之Webpack(基本使用)

最新推荐文章于 2023-03-19 08:46:36 发布

十六夜之彼岸舞

最新推荐文章于 2023-03-19 08:46:36 发布

阅读量104

点赞数

文章标签： vue javascript js python java

本文链接：https://blog.csdn.net/flowerStream/article/details/117686514

版权

webpack的起步

基本使用

新建目录结构

index.html

 
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入打包后的js文件-->
    <script src="dist/bundle.js"></script>
</head>
<body>

</body>
</html>

 
    

main.js

// 通过CommonJS模块化导入函数
const {add} = require('./test.js')
console.log(add(100, 100));

test.js

function add(num1,num2){
    return num1 + num2
}
// 通过CommonJS模块化导出函数
module.exports = {
    add
}

通过webpack打包JS文件

 
     # 指定一个源码中的js文件,然后指定一个目标位置和打包成的JS文件就可以
webpack ./src/js/main.js ./dist/bundle.js

看上面的index.html中直接引用打包后的js文件就可以

运行效果

作者：彼岸舞

时间：2021\06\07

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

十六夜之彼岸舞

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue入门教程（6）——webpack

qq_43413774的博客

04-23

341

8.webpack Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。中文官方网站：https://www.webpackjs.com/ 官方给出的解释：本质上，webpack是一个现代化JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归的构建一个依赖关系图(dependency graph)，其中包含应用程序的每个模块，然后将这些模块打包成一个或多个bundle。为什么要打包

vue实战--webpack基本使用

忘掉地平线

12-10

4133

安装webpack 全局安装：npm i -g webpack 目的：在任何目录中通过CLI使用 webpack 这个命令项目安装：npm i -D webpack目的：执行当前项目的构建安装失败：目录下存在一个以前的jQuery包安装成功使用实例思路 1 使用npm init -y 初始package.json，使用npm来管理项目中的包 2 新建项目目录结构及index.html和m

参与评论您还未登录，请先登录后发表或查看评论

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

vue 基础 —— webpack 安装、配置、使用和其插件的配置

猎人在吃肉

08-14

1768

下面是以隔行变色效果为例，讲解使用 webpack 做开发前端和 webpack 的各种配置。通过示例，让大家了解webpack各种配置的含义和使用步骤，不需要大家掌握。在实际开发中，只需一键即可生成 webpack 这些配置。npm 已经下载和配置完毕Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。......

webpack的使用（Vue）

yoOvQ的博客

12-07

1041

使用webpackwebpack引言webpack基础webpack安装通过vue-cli构建工具初始化项目目录vue-router创建router对象及配置路由因为傻逼vue老师要做期末项目，但是他的课上的太垃圾了，一学期下来啥都没学会，特地写下第一篇文档自学vue，无语球球他让我优秀吧，我都要落眼泪了。本人使用mbp。 webpack引言 webpack是一个前段资源加载/打包工具，根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack可以将多种静态资源JS、

Vue、Vuejs从入门到精通 | Webpack详解

COCO_gsta的博客

10-26

1027

学习视频来源：B站《Vue、Vuejs从入门到精通》个人在视频学习过程中也同步完成课堂练习等，现将授课材料与个人笔记分享出来。 npm config set registry https://registry.npm.taobao.org ，可以加速npm install速度 MAC下安装需要sudo npm install webpack@3.6.0 -g info.js export const name = 'why'; export c...

vue 基础 webpack基本概念使用

new__Pro的博客

10-07

146

概念： webpack本身是, node的一个第三方模块包, 用于打包代码现代 javascript 应用程序的静态模块打包器 (module bundler) 作用：把很多文件打包整合到一起, 缩小项目体积, 提高加载速度功能： less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩合并 web...

从零开始学VUE之Webpack(使用BabelLoader实现ES6语法打包转ES5语法)

彼岸舞的博客

06-07

822

ES6语法转ES5 在默认的情况下,ES6的语法在打包过后还是ES6的语法,但是这样会存在一个问题,那就是有的浏览器会不支持,所以需要将ES6转为ES5 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 执行一下 D:\zhangyugen@jd.com\vue\day1\html\4...

从零开始学VUE之Webpack(Webpack3.6.0全局安装)

彼岸舞的博客

06-07

1080

安装webpack(3.6.0) 先安装3.6.0,因为在之后学习Vuecli的时候从cli2开始学,学3的时候在升级webpack的版本全局安装 npm install webpack@3.6.0 -g 在CMD中运行,等待安装完成即可查看版本 webpack -version 可以看到是3.6.0 作者：彼岸舞时间：2021\06\07 内容关于：VUE 本文属...

vue-cli-webpack:从零开始搭Vue项目

05-09

从零开始搭Vue项目，主要是想脱离对脚手架全家桶的依赖，以及从中深入学习一点webpack相关的知识，不要每次打开package.json以及webpack的配置文件都一脸懵逼。新建项目 mkdir vue-cli-webpack cd vue-cli-webpack ...

使用webpack4 + vue2 从零开始创建的 TodoList 前端项目

最新发布

10-11

若有想要学 Webpack 的，真的很值得下载这个资源：其一、包括初始化安装 webpack 工具；其二、安装 Vue 并挂载实例，浏览器能打开 index.html 文件; 其三、webpack 基本配置，成功打包 .js 文件；其四、Webpack ...

Vue应用：Vue+Webpack从零开始创建项目(Vscode)

将登太行雪满山

03-08

1104

Vue应用：Vue+Webpack+Vscode从零开始创建项目安装Node.js 安装Vue-Cli和Webpack 创建Vue项目启动项目

node+vue-cli+webpack搭建教程

weixin_30323961的博客

03-26

428

链接：https://segmentfault.com/a/1190000009160934?_ea=1849098 链接：https://www.jianshu.com/p/2769efeaa10a 链接：https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian...

(精华2020年5月12日更新) vue教程篇 webpack配置详解

一点一滴

05-10

1万+

package.json的启动 "scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" } 基本共用配置文件webpack.common.js var webpack = require('webpack'); var path = r

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）

nongshuqiner的博客

02-28

2114

前言通过前面几章的实战，我们已经顺利的构建项目，并且从API接口获取到数据并且渲染出来了。制作更多的页面，更复杂的应用，就是各位自己根据自己的项目去调整的事情了。在vue中，我们使用vue-router来进行路由的构建，如果想学习可以去看：vue-router文档很简单但是不上实战你永远不知道它写的什么，是什么意思？本章就讲一下如何配置子路由，因为我们的项目不可能只有一个页面，而是由众多页面构成的。

vue学习笔记（9）之webpack上

肿肿的博客

01-26

149

Webpack（上）1、什么是webpack？2、前端模块化3、webpack安装4、webpack起步5、js文件的打包6、webpack的配置(1) 入口和出口(2) webpack的局部安装(3) package.json中定义启动 1、什么是webpack？官方的解释： At its core, webpack is a static module bundler for modern JavaScript applications. 翻译：从本质上来讲，webpack是一个现代的JavaScri

共同学习Vue.js ---webpack

weixin_47081743的博客

12-03

211

webpack 什么是webpack? 从本质上将,webPack 是一个现代的JavaScript应用的静态模块打包工具. 简单的将就是模块和打包前端模块化: webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系. 不仅仅是JavaScript文件,我们的CSS,图片,json文件等等在webpack中都可以被当做模块来使用. 打包: 将webpack中的各种资源模块进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript

VUE-webpack超详细教程