学习的首要在于形成闭环,所以虽然只是很累赘的复述,但也请认真对待吧~
webpack用于打包编译js模块,这样说很抽象,具体来说呢,一般的使用方式是通过
<script src=“xxxx" />的形式引入外部库的,但这样有几个问题。
1.无法确定这个引入是否多余
2.如果有多个引用,或者引用顺序错误,它们的依赖关系难以解决
3.这个引用不是本地的,容易受到影响,而且不能立即体现(文档中的词)
但是用webpack就能解决这些问题了。
如果有要用到的库,首先搬上我们的npm 安装它,如
然后我们就可以在Js文件中使用了
接下来的事,就不用我们操心了,webpack会帮助打包的啦
我们只需将要打包的东西指明,然后指定它生成的目录,文件名
然后在需要的地方,引用这个文件就可以了(bundle.js)
这些个配置,即 入口文件 输出文件等等的配置呢,我们专门新建个js文件来配置它,国际惯例叫webpack.config.js
长这样:
这样使用:
以上这种使用方式,称为cli方式,由于不是特别方便,可以添加一个快捷方式。
在package.json文件中添加一个Npm脚本
使用npm run build 就可以达到上面的效果。