Webpack打包方式及各场景下模块化语法总结

1.nodejs的方式：commonjs  var xx =require()   modules.exports=xxxx

注意：这种方式引入模块，路径会遵循node的规则，和js的src路径规则不同。

　　规则参考：http://www.ruanyifeng.com/blog/2015/05/require.html

2.ES6的import和export关键字 和commonjs等价，会被babel转换成方式1

3.AMD方式: require([依赖],function(注入){   })

4.CMD 和commonjs差不多

webpack可以识别以上所有模块载入方式，同时还有自带的require.ensure()  以及webpack2又有import( ) 方法

总之，这都是为了打包文件的。使用commonjs的1方式，这些文件被打包在一个总的js文件里，如果想单独打包，要使用AMD方式或者commonjs异步的方式或者自带的方式。

babel仅仅将es6的import语法转译成commonjs的require语法，真正对语句操作的是webpack，如果不安装webpack，会报错method require is undefined.

其次，webpack可以识别并转换尾缀为vue的文件。vue文件又叫单文件组件，优点是可以把js和html和css放在一个文件中，并且html可以直接以html的形式书写，而不是在组件的js中拼接字符串。需要webpack+vue-loader进行处理。

vue-cli干了什么：既然vue需要搭配webpack打包干活，于是就有了vue-cli，是一个带有配置webpack（或者相似功能的browserify）的vue脚手架（完整的项目目录，以及package.json脚本配置等）

vuex是干什么的：和上面没有关系，vuex是让组件更好通信的，管理共用的状态。

vue组件：两种创建方式分别是全局和局部。注意传入vue.extend()返回的构造器，或直接传入options对象都是可以的，后者会默认调用vue.extend()

注意组件的data必须是一个函数（为了避免data被共用）

关于package.json  npm start = npm run start的缩写  其实npm run后面跟的字段主要取决于package.json文件中scripts下的配置，它是一个命令的快捷运行方式，必须配置"start" : node ./app.js 才可以使用npm run启动。同样也可以配置dev然后用npm run dev启动

在package.json的脚本中的命令是自带环境变量的，比如webpack命令会自动去找项目目录下node_modules下本地安装的webpack，而如果在命令行中调用又如果没有全局安装webpack，必须要带上webpack在项目文件夹中的路径，才能调用webpack。