Webpack的简单使用

散一世繁华，颠半世琉璃

已于 2022-09-15 20:08:37 修改

阅读量5.6k

点赞数 1

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

于 2022-03-29 16:43:15 首次发布

本文链接：https://blog.csdn.net/qq_51447436/article/details/123822489

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.什么是Webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

2.安装Webpack

Webpack是一款模块加载器兼打包工具，它能够把各种资源，如JS，JSX，ES6，SASS，LESS，图片等都作为模块来处理和使用。
安装：

#打包工具
npm install webpack -g
#客户端
npm install webpack-cli -g

以管理员的身份打开命令行窗口，分别依次安装打包工具和客户端，具体如下图所示：
在这里插入图片描述
安装成功后，输入以下代码测试安装是否成功

webpack -v
webpack-cli -v

测试结果如下图所示：
在这里插入图片描述

3.使用Webpack

1.创建项目（在自定义的路径下创建一个空文件夹webpack-study),创建完毕后,在IDEA中打开。
2.创建一个名为modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js,用于编写JS模块相关代码；

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

4.在modules下创建一个名为main.js的主入口文件，用于打包时设置entry属性

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

5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包（以管理员身份输入）

module.exports={
    //定义程序的入口
    entry:'./modules/main.js',
    mode:"development",
    //定义导出文件的文件路径
    output:{
        filename:"./js/bundle.js"
    }
};

在这里插入图片描述
6.在项目路径下创建HTML页面，如index.html,导入Webpack打包后的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>