Vue前端学习笔记-002-webpack

webpack定义:它是一个打包工具,能够把你模块化开发的项目打包成浏览器能够识别的静态资源.(.js,.png等) 

webpack知识要点: 入口,出口,loader,plugin ( by---19老师 ) 

今日学习参考网站: 

1. webpack入门:     https://www.jianshu.com/p/42e11515c10f

2. CommonJS规范. http://javascript.ruanyifeng.com/nodejs/module.html  入口,出口. 

知识点:

1. module.exports = function() {...}  

这句话一般写到xxx.js文件里,例如 vue.config.js, babel.config.js

每一个文件就是一个模块,有本身的做用域.在一个文件里定义的函数,变量,类,都是私有,对其它文件不可见; module.exports变量是一个对象,它exports属性是对外的接口.对外经过require引入.

 2. var expamle = require('./exapmple.js'); 

require方法用来加载模块.

下面来个高级点儿的,之前一直不知道是什么意思: 

let {name,age,sex} = require('people');复制代码

  等同于:

let _people = require('people'); 
let name = _people.name; 
let age = _people.age; 
let sex = _people.sex; 复制代码

3.仿照书中的webpack例子打包时,遇到个相对路径绝对路径的问题:

path : './public' 说个人./public不是绝对路径,缘由是webpack版本问题致使的.改成以下:

webpack.config.js:

const path = require('path');
module.exports = {  entry: './app/main.js',  
output: {       
    path: path.resolve(__dirname, 'public'),    
filename: 'bundle.js' 
 }
};复制代码

注意__dirname,是有两个下划线的,这个变量是node的path模块.

缘由是js是弱类型语言,它没有文件系统的api,没法直接读取绝对路径的文件,这个时候经过node的path模块读取文件夹的绝对路径.