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属性