美文网首页Vue-菜鸟成长记
webpack学习记录(起步)

webpack学习记录(起步)

作者: L_c017 | 来源:发表于2018-02-12 12:14 被阅读12次

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

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 就可以达到上面的效果。

相关文章

  • webpack学习记录(起步)

    学习的首要在于形成闭环,所以虽然只是很累赘的复述,但也请认真对待吧~ webpack用于打包编译js模块,这样说很...

  • Webpack入门

    依照webpack 起步,做了一遍demo,记录几点体会 1.基本安装 创建目录,本地安装webpack npm ...

  • 初探webpack小记

    webpack学习记录 安装webpack 全局安装webpack:npm install webpack -g之...

  • webpack起步

    1.安装webpack 前提条件 : 已经安装了Node.js的最新版本(LTS---long term sup...

  • webpack起步

    webpack介绍 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规...

  • webpack 起步

    webpack webpack 就是一个前端资源打包工具,它根据模块的依赖关系进行静态分析,然后将这些模块按照指定...

  • webpack起步

    1、新建项目:webpackDemo 2、安装 在本地安装webpack 接着安装webpack-cli 此时we...

  • 前端工程化之webpack学习记录

    本文是本人正式开始学习webpack的记录文档,时间:2020-05-16,webpack版本:"webpack"...

  • webpack 起步遇到的坑(推荐全部本地安装)

    照着webpack官网 起步 参考:webpack 大法好 ---- 基础概念与配置(1)解决webpack打包报...

  • webpack学习记录

    学习链接: https://doc.webpack-china.org/concepts/webpack处理css...

网友评论

    本文标题:webpack学习记录(起步)

    本文链接:https://www.haomeiwen.com/subject/kbyrtftx.html