webpack入门第一篇

最新推荐文章于 2022-04-09 04:24:52 发布

小~小

最新推荐文章于 2022-04-09 04:24:52 发布

阅读量268

点赞数

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

本文链接：https://blog.csdn.net/u014196765/article/details/78043745

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

从网上看了各种资料，总是找不到合适的资料，然后自己学习，经过了几番折腾，决定自己写一篇教程，希望看到的人，可以快速入门webpack。也希望看到的朋友能够学会webpack，个人觉得确实是个好东西。
首先进入官网 http://webpack.github.io/docs/tutorials/getting-started/，居然是英文的，当然肯定是英文的，哈哈。那么现在我们来解析一下这个英文文档。这个文档是webpack的入门教程，也算是开始的教程，跟着教程做就好。废话少说，我们开始今天的入门第一天。
我这里是win7系统，就按windows的命令来介绍了，苹果本差不多的。
1，首先需要安装node.js，这个不用介绍了吧，如果需要的话，可以下面评论，我来帮你解答。
2，安装webpack，

npm install webpack -g

3，新建文件demo1，在demo1文件里按住shift，然后右键，弹出命令行。
4，新建文件，entry.js

document.write("It works.");

5、新建文件index.html

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

6，现在运行webpack的时刻来了，在命令行里输入

webpack ./entry.js bundle.js

如果成功的话，会展示如下

Version: webpack 1.14.0
Time: 16ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 28 bytes [rendered]
    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

现在可以运行index.html查看结果了。

为了防止教程过长，这篇博客就到这结束了，如果喜欢可以继续看下一篇，我会持续更新这个博客，帮助来学习webpack。

小~小

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack入门第一篇

从网上看了各种资料，总是找不到合适的资料，然后自己学习，经过了几番折腾，决定自己写一篇教程，希望看到的人，可以快速入门webpack。也希望看到的朋友能够学会webpack，个人觉得确实是个好东西。首先进入官网 http://webpack.github.io/docs/tutorials/getting-started/，居然是英文的，当然肯定是英文的，哈哈。那么现在我们来解析一下这个英文文
复制链接

扫一扫