深入webpack（Vue教学）

最新推荐文章于 2024-07-16 16:20:26 发布

X ゜

最新推荐文章于 2024-07-16 16:20:26 发布

阅读量1.2k

点赞数 3

分类专栏： Vue 文章标签： vue intellij idea node.js java vue.js

本文链接：https://blog.csdn.net/weixin_44625302/article/details/106958783

版权

Vue 专栏收录该内容

12 篇文章 5 订阅

订阅专栏

全局安装webpack（在cmd中类似安装vue-cli）

vue-cli脚手架安装

# 安装
cnpm install webpack -g
cnpm install webpack-cli -g
# 测试
webpack -v
webpack-cli -v

新建一个目录结构

在这里插入图片描述
hello.js

// 暴露一个方法
exports.sayHi1 = function(){
    document.write("<h1>Hello, World--------1!</h1>")
};
// 暴露第二个方法
exports.sayHi2 = function(){
    document.write("<h1>Hello, World--------2!</h1>")
};
// 暴露第三个方法
exports.sayHi3 = function(){
    document.write("<h1>Hello, World--------3!</h1>")
};

main.js

// 接入一个文件，这样就可调用它暴露的方法：./表示当前目录
var hello = require("./hello");
hello.sayHi1();

在项目目录下新建webpack.config.js

// 打包配置
module.exports = {
    entry: './modules/main.js',       // 程序入口
    output: {
        filename: './js/bundle.js'    // 输出位置
    }
};

运行测试webpack，发现多出一个文件夹dist

在这里插入图片描述

创建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>