Webpack学习使用

最新推荐文章于 2024-10-29 10:06:15 发布

qq_42042158

最新推荐文章于 2024-10-29 10:06:15 发布

阅读量76

点赞数

分类专栏：学习笔记文章标签： vue.js node.js javascript webpack

本文链接：https://blog.csdn.net/qq_42042158/article/details/120523992

版权

学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

安装webpack

WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
由于Vue的项目是根据ES6的规范来写的，但是目前许多浏览器不支持ES6所以用WebPack打包成ES5的规范
安装：

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

测试安装是否成功

webpack -v
webpack-cli -v

在这里插入图片描述

使用webpack

创建项目
新建文件夹
D:\project\webpack-study

用IDEA打开
创建一个名为modules的目录，用于放置JS模块等资源文件

在这里插入图片描述

在modules下创建模块文件，如 hello.js，用于编写JS模块相关代码

在这里插入图片描述

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

编写程序主方法main.js

//引入hello对象
var hello = require("./hello");
//调用hello对象中的hello方法
hello.hello();

新建webpack.config配置文件

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

说明

entry：入口文件，指定WebPack 用哪个文件作为项目的入口.
output：输出，指定WebPack把处理完成的文件放置到指定路径.
module：模块，用于处理各种类型的文件
plugins：插件，如:热更新、代码重用等.
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

5.用webpack命令打包项目
先进入目录 D:\project\webpack-study
在这里插入图片描述
打包完成后的目录结构

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

7.浏览器运行
在这里插入图片描述

qq_42042158

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录