【Vue】如何使用Webpack实现打包操作

一、Webpack介绍

Webpack最主要的作用就是打包操作，由两个核心部分构成分别是“出口”与“入口”。wbepack是现在比较热门的打包工具了，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。说的直白一点，通过webpack打包操作，我们可以把原来的js文件通过打包，需要使用的时候直接引用，这样可以实现模块化开发，当然它的功能还不止于此。本文就介绍一个简单的打包操作和其相关的基础知识点。

二、安装Webpack

1、安装

指令①：

npm install webpack -g

$【Vue】如何使用Webpack实现打包操作,a0ca7fa616a54f6e9cfc20175e4aefaa.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第1张$

指令②：

npm install webpack-cli -g

$【Vue】如何使用Webpack实现打包操作,a22d54273dfe48eda71a289f578e01ea.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第2张$

查看安装是否成功：

webpack -v

webpack-cli -v

2、配置

创建webpack.config.js配置文件的一些属性

entry : 入口文件，指定webpack打包从那个文件作为项目入口

output : 出口，将指定的webpack放置到指定路劲

module : 模块，用于处理各种类型文件

plugins : 插件,引入的外部资源如script、link，也可以用于代码重用等

resolve : 设置路径的指向

watch : 监听功能

三、实操Webpack

1、创建一个webpack的文件夹

$【Vue】如何使用Webpack实现打包操作,46602bbea883402a8a99dfc7df08d1e9.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第3张$

2、用IDEA打开项目并创建modules包

$【Vue】如何使用Webpack实现打包操作,29a82a37d31d41daaa1a49d7bd089ed4.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第4张$

3、在modules包下写JS相关文件

$【Vue】如何使用Webpack实现打包操作,5194637a2b3141168c0244877621e363.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第5张$

4、再在modules包下写main.js的入口文件，用于打包时的设置entry属性

$【Vue】如何使用Webpack实现打包操作,3539abf0f679418988f50a7705420a5f.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第6张$

5、在目录项创建webpack.config.js配置文件，用于打包

$【Vue】如何使用Webpack实现打包操作,7d40b3a6f5d045599a7b36b92fe2b003.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第7张$

6、在终端控制台使用webpack进行打包

指令：webpack

$【Vue】如何使用Webpack实现打包操作,562b854a61e94be3ac81fdeae8c5731a.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第8张$

此时，idea根目录多一个dist包，里面有打包好的js文件。

$【Vue】如何使用Webpack实现打包操作,d1a5cb70d98a4005a33512f61b671cdc.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第9张$

7、直接引用打包好的文件

创建一个index.htm主入口文件，将我们打包好的js文件通过引入，运行。

$【Vue】如何使用Webpack实现打包操作,3ba9f4b1fddf495fb0221146816e5f95.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第10张$

效果：

$【Vue】如何使用Webpack实现打包操作,945de78545c1450b82b64ff358964133.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第11张$

四、Webpack打包原理

$【Vue】如何使用Webpack实现打包操作,ee20013e90084e7f9dd32391ac7ec5b8.png,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,操作,安装,程序,第12张$

如图是webpack通过我们的webpack.config.js进行打包的基本流程，希望对大家有所帮助。

五、总结

其实，我觉得这个webpack打包更有意思的，把我们的源文件进行压缩后，可以直接调用或者运行。我之前玩过一段时间的小程序，当时有个人给了我一个程序代码就是打包过后的（当时自己还不知道打包这个东东），这个程序可以用小程序直接运行，但是那么代码就看不懂，让自己困惑了好一段时间。当然现在自己学的比较多，之前不同的地方来慢慢清晰了起来。为什么要说这个事呢？其实是希望在屏幕前看这篇博客的小伙伴能够不忘初心，砥砺前行。那些让你现在迷惑的，搞不懂的，终有一天，你会把所有的细节，所以的内部把内容都搞明白的！加油！各位！