学习vue.js前的准备@webpack

https://www.imooc.com/article/2688

vue.js 基本知识,来自慕课网

Webpack(模块打包机):分析项目结构,找到js模块以及其他的一些浏览器不能直接运行的拓展语言,将其转换和打包为合适的格式供浏览器使用。


Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

注:

    CommonJS规范规定,

    每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即      module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

    CommonJS规范特点:

        ^所有代码都运行在模块作用域,不会污染全局作用域。

        ^模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,            以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。

        ^模块加载的顺序,按照其在代码中出现的顺序。

正式使用Webpack

webpack可以在终端使用,基本方法如下:

webpack{entry file}{detination for bundled file}

#{entry file} 处填写入口文件的路径

#{desiination for bundled file} 处填写打包文件的存放路径

#填写路径时不用加 {}


注:webpack不是全局安装的情况,需要额外指定node_modules中的地址,即:

        node_modules/.bin/webpack app/main.js public/bundle.js

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

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 11,747评论 0 16
  • 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较...
    不忘初心_9a16阅读 8,451评论 0 17
  • 第一部分:概念 概念 webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bu...
    吴佳浩阅读 8,181评论 0 2
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,333评论 7 110
  • 有雪所感 今天下了自去年冬天以来能算得上雪、能直观看到的第二场雪,第一场小得可怜,几乎没怎么留下痕迹就香消玉陨了...
    繁星如海阅读 981评论 0 0