webpack入门教程--1

最新推荐文章于 2024-10-15 11:16:53 发布

程先生哈

最新推荐文章于 2024-10-15 11:16:53 发布

阅读量46

点赞数

文章标签： webpack git javascript 前端 node.js

本文链接：https://blog.csdn.net/qq_35073135/article/details/129154884

版权

首先说什么是webpack：Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

然后因为webpack有不同的版本，所以可能会出现的情况是你跟着我的来一步一步的操作，但是结果却是不一样的，这时候就需要自行百度了。(本次Webpack是基于3.8.1)

首先是需要安装webpack ，而且本地环境是需要支持node.js的。如果不会的请看这里，非常简单的操作，就像安装一般的软件一样啊。还有就是我大天朝的特殊原因，我们的npm会比较慢，所以推荐大家使用淘宝的cnpm来安装。如果不会请看这里

好了，如果你把上面的两个都安装完毕了。那就可以使用cnpm在全局安装webpack了。

--------------------------------------------------------正文开始的分割线-----------------------------------------------------------

首先是安装，在你的控制栏，或者git中输入以下命令

cnpm install webpack -g

这个时候，你需要做的就是静静的等待；如果没有报错，那就恭喜你安装成功了。

然后我们需要自己来创建一个叫做app的文件夹，可以使用git命令行的方式，也可以直接使用Windows的右键新建文件夹。我是在D盘的这个文件中创建的，我的地址是D:\webpacktest\app git创建文件夹的命令是：

mkdir app

需要注意的是，我是在webpacktest这个文件中右键然后Git Bash Here，然后输入的上面的命令，意思说我现在还是在webpacktest这个文件夹中的。

这个时候，我们就能在webpacktest文件夹中看到这个咱们新建的叫做app的这个文件夹了。

然后咱们是在app文件夹中在新建一个js文件，咱们取名是book1.js，然后在文件中写入一句JavaScript语句；

document.write("It works.");

在app目录下添加一个index.html文件，代码如下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

下面咱们就开始使用webpack命令来打包了。请在app文件夹中Git命令行中输入以下语句：

webpack book1.js bundle.js

这时候就会输出以下信息：

Hash: 2b1f001650d8d1da05d3
Version: webpack 3.8.1
Time: 69ms
    Asset    Size  Chunks             Chunk Names
bundle.js  2.5 kB       0  [emitted]  main
   [0] ./runoob1.js 28 bytes {0} [built]

这里就是已经打包完成了。这时候咱们运行index.html文件，咱们就可以看到结果了，页面中显示一句话，“It works.”；这个时候其实就是咱们打包成功了，细心的人可能会发现，咱们在index.html中链接的就是bundle.js,而不是咱们自己写的book1.js，但是咱们通过webpack打包的形式，让我们的代码打包到了bundle.js中。

　　这是最最最最简单的打包，咱们主要是理解如何打包的，对打包有一个概念，以及环境的安装。咱们第二篇会讲解如何打包两个JS文件。