Webpack笔记

webpack

导入以及导出方式

  • node

    • 使用var 名称 = require('模块标识符')导入
    • 使用module.exports 和exports 来暴露成员
  • ES6
    • import 模块名称 from '模块标识符' import '标识路径'导入
    • export default 和 export暴露,export default暴露的可以自定义名称,一个模块中export default只能暴露一次
    • export暴露只能通过{}来接收,可以暴露多个,这种方式叫做按需导出,名称需要一致

webpack 常见错误

  • json里面不能写注释
  • npm不能保证之前装的包依然存在,看需要重装
  • webpack无法处理es6以上的语法,需要第三方的loader来处理
  • 在配置babel的loader规则时,需要使用exclude将node_modules目录排除掉
    • 原因

      • 1.消耗CPU
      • 2.哪怕把node_modules的js都转换完成,也无法正常运行
    • 安装两套包

      • cnpm i bable-core babel-loader babel-plugin-transform-runtime -D
      • cnpm i babel-preset-env babel-preset-stage-0 -D
    • 在配置文件中添加新的规则,{test:/.js$/, use:'babel-loader', exclude:/node_modules/}

在webpack中使用vue

  • 使用import Vue from 'vue'导入时,功能不完整只支持runtime-only方式

    • 包的查找规则

      • 1.找项目中有没有node_modules的文件夹
      • 2.在node_modules中根据包名,找对应的vue文件夹
      • 3.在vue文件夹中,找一个叫做package.json的配置文件
      • 4.在配置文件中,找到main属性【main属性指定了这个包加载时的入口文件】
    - 解决方法
     - 1.可以使用import Vue from '../node_modules/vue/dist/vue.js'
     - 2.在webpack.config.js中添加一个节点
     ``` javascript
       resolve:{
                   alias:{
                        "vue$":"vue/dist/vue.js"
                   }
              }
      ```
       然后使用import Vue from 'vue'导入即可
    
    • webpack无法打包.vue文件,需安装loader

      • cnpm i vue-loader vue-template-compiler -D ,并在配置文件添加匹配规则{test:/\.vue$/, use:'vue-loader'}
      • 在webpack中,想通过vue,把一个组件放到页面上展示,vm实例中的render函数可以实现(直接注册的方式), render:c=>c(login)
    • 导入路由组件时,不要将直接放到vm实例指定的容器中,以为render函数会直接覆盖掉
    • 子路由直接通过路由的嵌套即可
    • vue组件中style要使用scss或者less时,需使用lang属性,当设置样式只属于组件时需要使用scoped属性# webpack

导入以及导出方式

  • node

    • 使用var 名称 = require('模块标识符')导入
    • 使用module.exports 和exports 来暴露成员
  • ES6
    • import 模块名称 from '模块标识符' import '标识路径'导入
    • export default 和 export暴露,export default暴露的可以自定义名称,一个模块中export default只能暴露一次
    • export暴露只能通过{}来接收,可以暴露多个,这种方式叫做按需导出,名称需要一致

webpack 常见错误

  • json里面不能写注释
  • npm不能保证之前装的包依然存在,看需要重装
  • webpack无法处理es6以上的语法,需要第三方的loader来处理
  • 在配置babel的loader规则时,需要使用exclude将node_modules目录排除掉
    • 原因

      • 1.消耗CPU
      • 2.哪怕把node_modules的js都转换完成,也无法正常运行
    • 安装两套包

      • cnpm i bable-core babel-loader babel-plugin-transform-runtime -D
      • cnpm i babel-preset-env babel-preset-stage-0 -D
    • 在配置文件中添加新的规则,{test:/.js$/, use:'babel-loader', exclude:/node_modules/}

在webpack中使用vue

  • 使用import Vue from 'vue'导入时,功能不完整只支持runtime-only方式

    • 包的查找规则

      • 1.找项目中有没有node_modules的文件夹
      • 2.在node_modules中根据包名,找对应的vue文件夹
      • 3.在vue文件夹中,找一个叫做package.json的配置文件
      • 4.在配置文件中,找到main属性【main属性指定了这个包加载时的入口文件】
    - 解决方法
     - 1.可以使用import Vue from '../node_modules/vue/dist/vue.js'
     - 2.在webpack.config.js中添加一个节点
     ``` javascript
       resolve:{
                   alias:{
                        "vue$":"vue/dist/vue.js"
                   }
              }
      ```
       然后使用import Vue from 'vue'导入即可
    
    • webpack无法打包.vue文件,需安装loader

      • cnpm i vue-loader vue-template-compiler -D ,并在配置文件添加匹配规则{test:/\.vue$/, use:'vue-loader'}
      • 在webpack中,想通过vue,把一个组件放到页面上展示,vm实例中的render函数可以实现(直接注册的方式), render:c=>c(login)
    • 导入路由组件时,不要将直接放到vm实例指定的容器中,以为render函数会直接覆盖掉
    • 子路由直接通过路由的嵌套即可
    • vue组件中style要使用scss或者less时,需使用lang属性,当设置样式只属于组件时需要使用scoped属性
(0)

相关推荐

  • webpack之性能优化(webpack4)

    在讲解性能优化的方案之前,我们需要了解一下webpack的整个工作流程, 方案一:减少模块解析 也就是省略了构建chunk依赖模块的这几个步骤 如果没有loader对该模块进行处理,该模块的源码就是最 ...

  • Webpack最详解

    WEB前端开发社区 昨天 JavaScript模块打包的概念已经出现一段时间了.RequireJS在2009年首次发声,之后Browserify粉墨登场.接着各种打包工具如雨后春笋纷纷涌现.而webp ...

  • webpack的入门实践,看这篇就够了

    我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 文中的文件夹如果没有说创建 ...

  • 超级干货:高瓴资本张磊的投资笔记和思维导图

    超级干货:高瓴资本张磊的投资笔记和思维导图

  • 一则公报案例学习笔记:对修改股东出资期限应否适用资本多数决规则的思考|审判研究

    一.问题的提出 2021年第3期<最高人民法院公报案例>刊登了鸿大(上海)投资管理有限公司与姚锦城公司决议纠纷上诉案,裁判要旨为:"公司股东滥用控股地位,以多数决方式通过修改出资 ...

  • 725分高考状元唐楚玥记笔记的“三字”方法,以及里面藏着的学习秘诀

    你背不下来的书,总有人能背下来:你做不出来的题,总有人能做出来:你不爱做的笔记,总有人把它做到了极致. 不要小看记笔记,同样是一手漂亮的笔记,效果可能千差万别. 湖北725分高考状元唐楚玥的笔记就做到 ...

  • 72条经方笔记,助你精细辩证(建议收藏)

    导读:前人总结的经方运用思路,供大家参考. 1.温病不能发汗,又不能吃泻药,更不能用火攻,只能用白虎汤.真正的温病实证(表现为说胡话,大便干,下同时用强壮滋阴解热药活不用生地用人参也可),可用大量的麦 ...

  • JAVA多线程学习笔记整理

    多线程: 三种创建方法 继承Thread类,以线程运行内容重写run方法,创建Thread对象并用start方法启动该线程. (匿名内部类) (Lambda表达式) 实现Runable接口,以线程运行 ...

  • 高建忠.读方用方笔记(十)临证谈理中丸

    我们上一节谈了理中丸的第一功效,就是止吐泻的,那么这一节我们来谈理中丸方中何为君药?我们先来看看原方: 理中丸方:人参,干姜,炙甘草,白术各三两.上四味,捣筛,蜜和为丸,如鸡子黄许大,以沸汤数合,和一 ...

  • 周哥学习笔记(2021.5.8)

    心理界限存在的意义,正是为了帮助人们控制情绪进入的量,不至于太过冷漠或太过投入,让我们保持一个合适的距离与外界互动. 人没有办法只通过吸收变得更美好和丰富,它必须通过大胆的碰撞和创造.如果不能保持足够 ...

  • 皮囊读书笔记,当没有倾听者时,它就是伙伴

    当没有倾听者时,你就与书对话,它就是你的伙伴. 书的前半段,我一直在思考,为什么叫皮囊,皮囊应该写的是, 我们的生命本来多轻盈,都是被这肉体和各种欲望的污浊给拖住. 从前面几章阿太和父亲的皮囊中似乎领 ...

  • 《大江东区》杂谈,读书笔记

    雷东宝出监狱,对小雷家重新安排,为了得到政府的支持,把小雷家镇政府所有制.对于人物的安排,士跟是不敢再用了,让红伟远走,隔了一大领军人物,提了一个后期新秀,让背后的一堆后期新秀站到了他队伍中,这就是权 ...