有关webpack、 prototype 属性

prototype属性简单解释:https://www.w3school.com.cn/jsref/jsref_prototype_array.asp

<script type="text/javascript">

    function employee(name,job,born){
        this.name=name;
        this.job=job;
        this.born=born;
    }

    var bill=new employee("Bill Gates","Engineer",1985);

    employee.prototype.salary=null;
    bill.salary=20000;

    document.write(bill.salary);

</script>

prototype 属性使您有能力向对象添加属性和方法。

复杂解释: https://www.cnblogs.com/Nancy-wang/p/6903221.html?utm_source=itdadao&utm_medium=referral

链的链的链的链

有关webpack 的一些知识:https://juejin.im/post/5e01de37f265da33ab637daf

01、bundle.js 相当于是把整个文件打包后生成的~

02、 webpack是一个打包工具  分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

03、 入口, 出口, loader 模块转换器  plugins插件 module模块

在webpack里一个模块对应着一个文件,webpack会从配置的 Entry 开始递归找出所有依赖的模块。

04、(1)启动后在entry里配置的 module开始递归解析entry所依赖的所有module(2)每找到一个module, 就会根据配置的loader去找相应的转换规则(3)对module进行转换后在解析当前module所依赖的module(4)这些模块会以entry为分组,一个entry和所有相依赖的module也就是一个chunk(5)最后webpack会把所有chunk转换成文件输出,在整个流程中webpack会在恰当的时机执行plugin的逻辑

05、自己写js 自己写一个导出, 所谓导出嗯, 也就是

(1)导出 (hello.js文件下) module.exports = function ( ) {

(2)引入 index.js引入这个模块,那就是

const xxx = require(./hello,js)

xxxxx. appendChild(hello()) 

(3)index, 就直接去引用了?...  

(4) 吧index.js编译到bundle.js去执行

上面的例子, 入口index.js  出口bundle.js

06、通过配置文件来使用webpack

使用 webpack.config.js 

在此处写下了 module.exports = {

    entry:   / output:  【定义好了入口出口文件~】

终端输入webpack就好了。。。 直接引用了那js文件..
 07、自定义~.. 

本地服务器(不用框架脚手架直接webpack:

npm install webpack-dev-server -D

  • contentBase:该配置项指定了服务器资源的根目录,如果不配置contentBase的话,那么contentBase默认是当前执行的目录,一般是项目的根目录
  • port:指定了开启服务器的端口号,默认为8080
  • host:配置 DevServer的服务器监听地址,默认为 127.0.0.1
  • headers:该配置项可以在HTTP响应中注入一些HTTP响应头。

随后,添加配置项到webpack.config.js,并在package.json文件中添加启动命令

- -open 是用于启动完服务器后自动打开浏览器

也可添加一个dev-tool 对调试的话生成.map文件.. 

loaders 

  • test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude: 手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选)
  • options: 为loaders提供额外的设置选项(可选)

style-loader和css-loader,这样   

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值