webpack -> vue Component 从入门到放弃（一）

2019年9月14日 195次阅读来源: 翻滚的猿

此篇文章仅仅是整理自己接触webpack的入门过程，可能有很多不正确的地方，希望大家谅解，并指出错误帮助改进。

对于webpack的介绍和前期对他的入门使用，我觉得官方（中文网）已经介绍的很简单了，但是为了文章的可读性，还是按照自己的方式从头到尾的码一遍。

What is webpack?

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。(附上不明觉厉的解析图)

Second Step

我们来创建几个文件，测试一下webpack的基础功能（此demo与官网贴出基本一致）

#index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app"></div>
         <script src="bundle.js"></script>
         //bundle.js 是webpack编译时生成的文件
    </body>
</html>

#entry.js
document.getElementById('app').innerHTML="it works";

可以开始用webpack打包了

$ webpack entry.js bundle.js

《webpack -> vue Component 从入门到放弃（一）》” /> 在浏览器中打开 index.html 就可以看到效果了。我们再加一个文件<pre><code>#content.js
var p= document.createElement(

#更改一下entry.js
document.getElementById('app').innerHTML="it works";
require("./content.js");

然后再次运行 webpack

$ webpack entry.js bundle.js

webpack 会再次显示日志

看那么多，其实还不如来操作一下。。。那就等下一篇介绍吧，一篇文章有太多内容，会让人很乏的~~~

webpack -> vue Component 从入门到放弃（四）
webpack -> vue Component 从入门到放弃（二）
webpack -> vue Component 从入门到放弃（三）
github源代码

    原文作者：翻滚的猿
    原文地址: https://segmentfault.com/a/1190000008474299
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。