WebPack的安装及使用

最新推荐文章于 2024-07-28 00:56:04 发布

童、一

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量5.2k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44432831/article/details/115744223

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习目标：

WebPack的安装及使用

学习内容：

WebPack的使用

学习时间：

学习产出：

WebPack

1、介绍

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

本质上，WebPack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当WebPack处理应用程序程序时，它
会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。

WebPack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源，
还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;

伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。

前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

2、安装

cmd命令:
    npm install webpack -g
    npm install webpack-cli -g
安装完成后输入:
    webpack -v
    webpack-cli -v
 测试是否安装成功

3、使用WebPack

1、在IDEA中创建一个项目，将所有内容都删除，只剩下.idea文件
2、在项目中创建一个modules目录，在目录下创建hello.js、main.js两个文件，内容如下

hello.js

//暴露一个方法
exports.sayHi=function (){
    document.write("童一");
}

main.js：当作是js主入口

//引入hello.js，然后用hello调用hello.js中的方法sayHi
var hello = require("./hello");
hello.sayHi();

3、在根目录下创建webpack.config.js文件, 这个相当于webpack的配置文件内容如下
创建 webpack.config.js配置文件
entry：入口文件，指定Web Pack用哪个文件作为项目的入口
output：输出，指定WebPack把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

module.exports={
    /*入口，请求某个文件*/
    entry:'./modules/main.js',
    /*输出位置*/
    output:{
        filename:"./js/bundle.js"
    },
    mode:'development'
};

4、在控制台输入webpack命令，生成dist目录，在生成的js文件夹下面会有一个bundle.js文件
5、创建index.js导入bundle.js，内容如下:

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