vue--webpack打包工具

春风霓裳

已于 2022-01-22 17:48:00 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js webpack 前端

于 2022-01-22 17:43:24 首次发布

本文链接：https://blog.csdn.net/qq_43470725/article/details/122639680

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

作用：

由于一些浏览器不支持es6，所以出现了一个打包工具，将前端代码统一打包成es5
在这里插入图片描述

打包工具

npm install webpack -g

在这里插入图片描述

客户端

npm install webpack-cli -g

在这里插入图片描述

在这里插入图片描述

在package.json文件里面看到了：
“webpack”: “^3.6.0”
版本和我们安装的不同，所以等会打包可能会打包不进去

使用webpack打包项目

创建一个包：vue-webpack-study
在这里插入图片描述

创建hello.js

//暴露一个方法
exports.sayHi = function (){
    document.write("<h1>春风霓裳</h1>")
};

创建main.js

var hello = require("./hello");
hello.sayHi();

创建打包webpack.config.js:

module.exports = {

    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }

}

entry:打包入口类
output:打包后的输出位置

输入命令：
webpack就是你的打包包名的.config前面的名字

webpack

在这里插入图片描述
然后能看到多了一个dist的包，下面有js包，下面有bundle.js

然后创建index.html文件：作为引入js进来的的入口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

前端的模块化开发
<script src="dist/js/bundle.js"></script>

</body>
</html>

在这里插入图片描述
成功！！！
所以不管以后项目多复杂，都是会生成一个bundle.js后，引入到html文件中就可以了！！！

所以前端就只用写js和vue的代码就行了，通多js或者vue直接将html话出来！！！

前端热部署打包：
在这里插入图片描述

春风霓裳

关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue--webpack打包工具

作用：

使用webpack打包项目

然后创建index.html文件： 作为引入js进来的的入口：

然后创建index.html文件：作为引入js进来的的入口：