Vue：webpack的下载使用（狂神）

喵俺第一专栏

已于 2022-07-31 08:59:21 修改

阅读量774

点赞数

分类专栏： # Vue总结文章标签： vue.js 前端 javascript

于 2022-06-27 16:40:10 首次发布

本文链接：https://blog.csdn.net/dengfengling999/article/details/125481912

版权

Vue总结专栏收录该内容

43 篇文章 3 订阅

订阅专栏

把ES6的规范打包成ES5让所有浏览器都能运行

ES6-ES5

hello.js

//暴露一个方法
exports.sayHi=function(){
    document.write("<h1>狂神说ES6</h1>")
};

exports.sayHi2=function(){
    document.write("<h1>狂神说ES6</h1>")
};

exports.sayHi3=function(){
    document.write("<h1>狂神说ES6</h1>")
};

mian.js:

//引入一个方法
var hello= require("./hello");
hello.sayHi();

webpack-config.js:

//导出
module.exports={
  entry:'./modules/main.js',
    output:{
      filename:"./js/bundle.js"
    }
};

在控制台输入进行打包：webpack

打包完之后：多了文件夹和文件

把上面main.js写的ES6的require进行降级了成ES5，你定义的代码打包后就可以用了

创建一个index.html,使用刚打包完的js文件

index.xml:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="dist/js/bundle.js"></script>

</body>
</html>

点击：谷歌浏览器：

vue只有一个主入口，因为前端工程话之后，不需要那么过页面了，它是一个一个js组件，一个一个vue组件，组件一拼，前端一引,，这就是模块化开发，前端高js就好了。vue就是js框架它去写模块

webpack就是一个打包工具，打包选择打包入口，自动把入口里面它所需要的所有东西都通过它的方式打包起来

喵俺第一专栏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue：webpack的下载使用（狂神）

vue只有一个主入口，因为前端工程话之后，不需要那么过页面了，它是一个一个js组件，一个一个vue组件，组件一拼，前端一引,，这就是模块化开发，前端高js就好了。webpack就是一个打包工具，打包选择打包入口，自动把入口里面它所需要的所有东西都通过它的方式打包起来。把上面main.js写的ES6的require进行降级了成ES5，你定义的代码打包后就可以用了。创建一个index.html,使用刚打包完的js文件。把ES6的规范打包成ES5让所有浏览器都能运行。打包完之后多了文件夹和文件。......
复制链接

扫一扫