码迷,mamicode.com
首页 > Web开发 > 详细

webpack入门教程--1

时间:2018-03-28 15:40:47      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:col   淘宝   javascrip   根据   报错   utf-8   char   bsp   天朝   

首先说什么是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文件。

webpack入门教程--1

标签:col   淘宝   javascrip   根据   报错   utf-8   char   bsp   天朝   

原文地址:https://www.cnblogs.com/daniao11417/p/8663703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!