Vue(14) —— webpack学习使用

最新推荐文章于 2022-03-22 18:01:24 发布

原来是小别扇

最新推荐文章于 2022-03-22 18:01:24 发布

阅读量178

点赞数

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

本文链接：https://blog.csdn.net/Jzandth/article/details/108789992

版权

21 篇文章 1 订阅

订阅专栏

本文介绍了Webpack的基本概念及其在前端开发中的作用。详细讲述了Webpack的安装步骤、配置方法及如何使用Webpack来构建项目。通过实例演示了如何将多个JS文件打包成一个符合ES5规范的文件。

摘要由CSDN通过智能技术生成

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

因为现在很多浏览器都还停留在ES5规范，但是我们编写前端代码的时候需要使用到EES6的规范和新特性，所以这就导致了我们按照ES6写的代码浏览器解析不了，所以我们需要使用webpack将我们写的ES6规范的前端代码自动转为ES5规范，这样几乎所有浏览器就可以运行我们的前端程序了
在这里插入图片描述

安装

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

在这里插入图片描述

在这里插入图片描述
配置
建立 webpack.config.js 配置文件

建立项目
建立一个名为 models 的目录，用于放置 JS 模块等资源文件
在models下建立模块文件，如 hello.js，用于编写 JS 模块相关代码
在models下建立一个名为 main.js 的入口文件，这个文件名称随便取，但是为了规范和代码的可读性，我们遵守官方推荐文件命名规范，将入口文件命名为main.js；当然，不是你写一个main.js它就变成了整个js的models中的文件入口了，我们还需要在打包的时候指定它作为程序的入口它才真正变成了整个js文件model的入口执行文件/程序
在项目目录下建立 webpack.config.js 配置文件，并配置entry和output两个属性
在项目目录下建立 HTML 页面，如 index.html(官方命名规范)，导入 WebPack 打包后的 JS 文件
在IDEA控制台中直接执行webpack;若是失败的话,就使用管理员权限运行便可!

所以index.html只需要导入这一个js文件即可使用我们在model中定义的所有js的功能
运行 HTML 看效果

说明

# 参数 --watch 用于监听变化，即实现我们js文件的热部署
# 只要你修改了js文件，就马上自动打新的整合js文件应用到前端
webpack --watch

从上面webpack的使用例子来看，webpack就是将所有的js文件融合为一个js文件，并将其语法从ES6转为ES5语法规范
这样做的好处就是使得前端要实现复杂功能的js代码可以分模块进行开发，在开发的时候需要被调用的模块就显式的声明自己要导出的模块；在main.js中就显式的引入(require(“js子模块文件路径”))需要导入的子模块，即可在main.js中调用其他子model中的方法实现功能
在开发中index.html基本是不需要改动的，创建好了之后直接引入我们使用webpack打包输出的js文件即可，最后就是修改一下title标签的值