Vue(2)webpack的安装与使用

最新推荐文章于 2024-06-27 16:10:22 发布

OVO_LQ_Start

最新推荐文章于 2024-06-27 16:10:22 发布

阅读量567

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/OVO_LQ_Start/article/details/106790996

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

安装webpack

管理员模式进入cmd
输入
npm install webpack -g 等待下载。
下载完毕输入
npm install webpack-cli -g 等待下载。
下载完毕输入
webpack -v
webpack-cli -v检查版本号，安装成功。

使用webpack

1.创建文件夹webpack-stduy
2.使用idea打开此文件夹
3.创建modules类似于java包，并在其中创建hello.js与和main.js
在这里插入图片描述
main.js

//导入hello.js，相当于java类。
var hello = require("./hello");
//执行hello.js中的方法
hello.sayHi();

hello.js

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

4.在module的同级目录下创建webpack.config.js

module.exports = {
    entry:'./modules/main.js',//程序执行的入口
    output:{
        filename:"./js/bundle.js"//程序打包的位置
    }
}

5.执行打包命令
【1】.在idea的Terminal中输入webpack命令。
【2】.在cmd中，进入当前项目输入webpack命令
6.验证
创建index.html，将打包好的js导入到当前页面中，运行即可。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="dist/js/bundle.js"></script>
</body>
</html>

OVO_LQ_Start

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(2)webpack的安装与使用

安装webpack管理员模式进入cmd输入npm install webpack -g 等待下载。下载完毕输入npm install webpack-cli -g 等待下载。下载完毕输入webpack -vwebpack-cli -v检查版本号，安装成功。使用webpack1.创建文件夹webpack-stduy2.使用idea打开此文件夹3.创建modules类似于java包，并在其中创建hello.js与和main.jsmain.js//导入hello.js，相当于java
复制链接

扫一扫

专栏目录