Vue工程webpack打包

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

倔强100%

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

阅读量164

点赞数

本文链接：https://blog.csdn.net/qq_40359381/article/details/106865056

版权

下载webpack

使用命令下载webpack相关插件

npm install webpack -g
npm install webpack-cli -g

查看版本号，显示出具体版本则下载成功

webpack -v
webpack-cli -v

使用vue进行模块化开发

新建hello.js暴露方法供其他js引用，可防止原生 < script >< /script > 标签引入多个js方法重名的问题。

//hello.js
//暴露一个方法
exports.sayHi = function(){
    document.write("<h1>学习webpack</h1>")
}

新建main.js引入hello.js，则可以使用hello.js中的方法。

//main.js
//引入hello.js存放在变量hello中
let hello = require("./hello")
hello.sayHi();

新建webpack.config.js，注意名字一定要对，否则报错。

//配置打包目录
module.exports = {
    //入口
    entry: './modules/main.js',
    //打包出口
    output: {
        filename: "./js/bundle.js"
    }
};

Terminal 输入webpack,自动打包，生成bundle.js。或者输入webpack --watch可以打包后继续监听，实现热部署

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

热部署实时更新页面内容，输入 学习webpack。

目录结构

在这里插入图片描述

倔强100%

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue工程webpack打包

下载webpack使用命令下载webpack相关插件npm install webpack -gnpm install webpack-cli -g查看版本号，显示出具体版本则下载成功webpack -vwebpack-cli -v使用vue进行模块化开发新建hello.js暴露方法供其他js引用，可防止原生 < script >< /script > 标签引入多个js方法重名的问题。//hello.js//暴露一个方法exports.sayHi
复制链接

扫一扫