zoukankan      html  css  js  c++  java
  • 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属性
  • 相关阅读:
    virtual judge(专题一 简单搜索 C)
    virtual judge(专题一 简单搜索 B)
    virtual judge(专题一 简单搜索 A)
    HDU1548(楼梯问题bfs)
    Codeforces Round #517 (Div. 2, based on Technocup 2019 Elimination Round 2)D(思维,DP,字符串)
    Codeforces Round#522 Div2E(思维,背包,组合数学)
    Codeforces Round #522 Div2C(思维)
    Educational Codeforces Round 53C(二分,思维|构造)
    UPCOJ9526(SG函数打表,nim游戏异或规则)
    Wannafly挑战赛27B(DFS,链表头插法)
  • 原文地址:https://www.cnblogs.com/angle-xiu/p/12963340.html
Copyright © 2011-2022 走看看