webpack

最新推荐文章于 2023-05-04 22:57:28 发布

Massimo_ycw

最新推荐文章于 2023-05-04 22:57:28 发布

阅读量83

点赞数

分类专栏： Vue 文章标签： webpack vue.js

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/125458081

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

一、什么是Webpack

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

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

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

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

二、安装Webpack

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

2.1、安装

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

测试安装成功：
在这里插入图片描述

2.1、配置

创建webpack.config.js配置文件：

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

三、使用webpack

3.1、创建项目，并用idea打开

3.2、创建一个名为modules的目录，用于放在JS模板等资源文件

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

//暴露一个方法
exports.sayHi = function () {
    document.write("<h1>马西莫</h1>");
};

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

//require导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

3.5、在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

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

3.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>