Vue webpack

最新推荐文章于 2024-06-07 17:03:35 发布

忘川茶社

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量367

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44538225/article/details/119320473

版权

工具:idea
想要详细了解Vue的话，视频链接https://www.bilibili.com/video/BV18E411a7mC
博客链接：https://blog.csdn.net/DDDDeng_/article/details/107475920

什么是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、SAAA、LESS、图片等都作为模块来处理和使用。

安装命令：

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

在这里插入图片描述

安装完成之后可以进idea看一下：idea中的自带生成的版本不是最新的，所以打包的时候会有些东西打包不了
在这里插入图片描述
测试安装成功命令：

webpack -v
webpack-cli -v

在这里插入图片描述

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

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

2. 使用Webpack
用idea打开，会生成一个.idea文件说明该文件就交由idea负责
在这里插入图片描述
在idea中创建modules包

在moduls目录下新建一个名为ExposingPorts.js的js文件

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

在moduls目录下新建一个main.js的js文件

var bl = require("./ExposingPorts");//引入文件
bl.baoLu();//调用方法

在项目名称目录下新建webpack.config.js文件

//把module导出
module.exports = {
    entry: './modules/main.js',//打包入口
    //输出到这个下
    output: {
        filename: "./js/bundle.js"
    }
};

然后在idea中，打开Terminal：
在这里插入图片描述
如果没有打开过Terminal这个的，

当出现多少毫秒证明打包成功

接着项目会出现一个dis目录

项目名称目录下面创建一个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>

然后在浏览器中打开
在这里插入图片描述

接着运行结果：
在这里插入图片描述

然后这个webpack就差不多学习完。

忘川茶社

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue webpack

工具:idea想要详细了解Vue的话，视频链接https://www.bilibili.com/video/BV18E411a7mC博客链接：https://blog.csdn.net/DDDDeng_/article/details/107475920什么是Webpack本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要
复制链接

扫一扫