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文件
,需安装loadercnpm 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文件
,需安装loadercnpm 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)