webpack–自定义配置
最后更新于：2022-04-02 08:08:25
[TOC]
>[success] # 了解 -- node 的包查找规则
~~~
举个例子例如要使用Vue:
import Vue from 'vue'
1.找 项目根目录中有没有 node_modules 的文件夹
2.在 node_modules 中 根据包名，找对应的 vue 文件夹
3.在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
4.在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
5.在package.json 的main属性如果还没找到就会找然后一次查找index.js、
index.json、index.node，如果还是找不到的话，就会抛出查找失败的异常。
~~~
>[success] # 了解 -- Runtime Only和Runtime+Compiler
~~~
1.通过上面的找包规则中，我在node_modules中去package.json中定位vue里面的
main，发现我们导入的vue是Runtime Only，如下图
2.使用import 导包进来的Runtime Only和我们在js中直接使用的vue.js区别在哪
~~~
* Runtime Only(简单的说体积小但需要用render编译组件)
~~~
1.我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的
vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它
只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。 在将 .vue 文件编译成
JavaScript的编译过程中会将组件中的template模板编译为render函数，所以我们
得到的是render函数的版本。所以运行的时候是不带编译的，编译是在离线的时
候做的。
2.在生命周期章节说到，vue会检测挂载点el,如果el中存在template，就会使用
template渲染，但其实vue会将template渲染的页面再用render解析，由于这个版
本没有了template的解析因此需要render
~~~
* Runtime+Compiler
~~~
1.我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字
符串，则需要在客户端编译模板
2.我觉得虽然使用这个多出几kb，但是却因去要从新理解有些不适应
~~~
[runtime-only](https://jingsam.github.io/2016/10/23/standalone-vs-runtime-only-build-in-vuejs2.html)
上面对Runtime Only和Runtime+Compiler文章出处
>[success] # 为什么使用的是render
~~~
1.结合上面讲解重新理解这句话
2.在生命周期章节说到，vue会检测挂载点el,如果el中存在template，就会使用
template渲染，但其实vue会将template渲染的页面再用render解析，由于这个版
本没有了template的解析因此需要render.
3.根据声明周期来说，使用render其实变相的使用了template，使用template生成
的内容是会覆盖el节点的内容。
4.简单的一句话:render 和compent 的区别，两者前者会覆盖整标签的内容，后者
不会.
~~~
>[success] # es6 导出和node导出
~~~
1.在node中我们使用require 和 module.exports 进行搭配使用,一个用来导入一个
用来导出
2.在webpack 中我们换做了es6 的import导入，为什么没有使用node的require导
入，原因在'前端知识扩展中笔记'有过解释，这里简单说明下，require的导入是服
务器端的导入，不支持异步的，但是客户端往往需要异步操作因此使用import
3.已经使用了import 作为前端的导入就需要去理解下前端的导出'export default' 和
'export'
4.export default 向外暴露的成员，可以使用任意的变量来接收
5.在一个模块中，export default 只允许向外暴露1次
6.在一个模块中，可以同时使用 export default 和 export 向外暴露成员
7. 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
8. 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
9. 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；
10. 更多内容看廖雪峰老师的es6：
http://es6.ruanyifeng.com/?search=export&x=8&y=13#docs/module#export-%E5%91%BD%E4%BB%A4
~~~
>[danger] ##### 关于导出举个例子
~~~
暴露多个成员export var 变量 = 值
export var title = '小星星'
export var content = '哈哈哈'
var info = {
name: 'zs',
age: 20
}
export default info
import m222, { title as title123, content } from './test.js'
~~~
*按需导出也可以一次性导出内容
~~~javascript
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
~~~
';