webpack学习记录(起步)

学习的首要在于形成闭环,所以虽然只是很累赘的复述,但也请认真对待吧~

webpack用于打包编译js模块,这样说很抽象,具体来说呢,一般的使用方式是通过

<script src=“xxxx" />的形式引入外部库的,但这样有几个问题。

1.无法确定这个引入是否多余

2.如果有多个引用,或者引用顺序错误,它们的依赖关系难以解决

3.这个引用不是本地的,容易受到影响,而且不能立即体现(文档中的词)

但是用webpack就能解决这些问题了。

如果有要用到的库,首先搬上我们的npm 安装它,如

然后我们就可以在Js文件中使用了


直接import

接下来的事,就不用我们操心了,webpack会帮助打包的啦

我们只需将要打包的东西指明,然后指定它生成的目录,文件名

下面的东西先不用管

然后在需要的地方,引用这个文件就可以了(bundle.js)

这些个配置,即 入口文件 输出文件等等的配置呢,我们专门新建个js文件来配置它,国际惯例叫webpack.config.js

长这样:

这样使用:

以上这种使用方式,称为cli方式,由于不是特别方便,可以添加一个快捷方式。

在package.json文件中添加一个Npm脚本


使用npm run build 就可以达到上面的效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,227评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0 21
  • 前言 WebPack 是什么? WebPack 是什么,WebPack 可以看做是模块打包机:它做的事情是,分析你...
    Promise__阅读 1,162评论 3 12
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,757评论 0 1