Vue-模块化（三）

常见的模块化规范
CommonJS：Node
AMD
CMD
ES6的Modules

/*
	CommonJS模块化的写法
*/
//CommonJS的导出
module.exports = {
	flag:true,
	sum(a,b){
		return a+b;
	}
}
//CommonJs的导入(解构写法)
let {flag,sum} = require('./xxx.js');

/*
	ES6模块化的写法。export/import
*/
//export	第一种写法
export let name = "why";	//普通变量
export function sum(a,b){	//导出函数
	return a+b;
};
export class Person{	//导出类
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	run() {
		console.log(this.name + "在奔跑!");
	}
}
//export	第二种写法
let name = "why";
function sum(a,b){
	return a+b;
};
class Person{
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	run() {
		console.log(this.name + "在奔跑!");
	}
}
export {name,sum,Person};
//export default(只能有一个)	第三种写法
//就是在导入的时候可以自定义名字

//import
//在html代码中引入js文件，<script src="" type="module"></script>
//在导入的时候不写{}则表示导入的是default导出的。
import {name,sum,Person} from "./xxx.js"
import * as info from "./xxx.js"

从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具


模块的概念（webpack本身具备的功能）
在ES6之前，想使用模块化需要各种支持，要借助于其他的工具才能进行模块化开发。而且还需要处理模块间的各种依赖，并且将其进行整合打包。webpack的出现可以完美解决以上问题。
打包的概念（webpack通过loader获得的功能）
打包就是将各种资源模块进行打包合并成一个或者多个包。并且在打包的过程中，对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成Javascript等等操作。

webpack的正常运行依赖node环境
npm(node package manager)用来管理node环境下的各种依赖包
全局安装：在终端直接执行webpack命令，使用的是全局安装的webpack
局部安装：当在package.json中定义了scripts时，其中包含了webpack命令，会优先使用局部webpack。
全局安装的和局部安装的版本可以不一样。实际上全局用的比较少，都是用的局部安装。因为每个项目使用的webpack的版本可能都不一样。

dist->distribution

在编码时可以使用任何一种模块化写法。之后用webpack打包成浏览器认识的js文件。
eg:webpack ./src/main.js ./dist/bundle.js
可以简化上述写法。只写webpack。那就需要配置文件webpack.config.js。
module.exports = {
entry: ‘./src/main.js’,
output: {
path: path.resolve(_dirname,‘dist’),
filename: ‘bundle.js’
}
}

思路
你想使用模块化开发----->浏览器不支持，你就得用webpack打包成浏览器支持的文件----->使用webpack ./src/main.js ./dist/bundle.js，但是写起来麻烦----->webpack根据webpack.config.js打包需要动态获取文件路径----->想动态获取路径就得用node的包const path = require(‘path’)。项目就变成了node项目----->node项目就得npm init。init完就可以用path了。不需要额外依赖其他包，因为path默认就是node有的，全局的。此时就可以直接使用’webpack’命令打包了，它会根据webpack.config.js文件内容打包。----->但是项目中一般都不使用这种方式打包。要跟npm命令结合使用。----->修改package.json的scripts，配置对应的映射。----->这样映射拿到的命令和在命令行/终端直接输入相同命令执行相比有一个区别就是，这样映射的命令会优先找本地命令（就是之前安装webpack时涉及到的全局安装和局部安装。）

npm install 安装package.json中所依赖的包
npm 5.0版本之后，npm install后都会有一个package-lock.json。用来记录当前状态下实际安装的各个npm package的具体来源和版本号。
协同开发时，在更新package.json和package-loc.json这两个文件后，npm install是可以直接覆盖掉原先的版本的，所以在协作开发时，这两个文件如果有更新，你的开发环境应该npm install一下才对。

开发时依赖(devDependencies)：npm install webpack@3.6.0 --save-dev
运行时依赖(dependencies)

什么是loader

loader是webpack中非常核心的一个概念
在之前的实例中，我们都是用webpack来处理js代码，并且webpack会自动处理js之间的依赖。但是开发中不仅仅有js，还有css，图片，ES6语法，TypeScript语法。将scss,less转成css，将.jsx(react文件)，.vue转成js文件等。对于webpack本身是不支持的。但是给webpack扩展对应的loader就可以了。

loader使用过程

1.通过npm安装需要使用的loader
2.在webpack.config.js中的module关键字下进行配置


eg:
1.将css文件也视为模块化。在main.js中添加require(’./css/xxx.css’);
2.安装css-loader(只负责正常加载css模块),style-loader(负责渲染css，使样式生效)
3.配置
module: {
rules:[
{
test: /.css$/,
//使用多个loader时，加载顺序从右向左。
use: [‘css-loader’,‘style-loader’]
}
]
}

webpack本身只可以正常解析js，当在js里引用了css，他就会把css当成模块来解析，所以就需要引入相应的loader，否则就会报错。当解析css时发现有图片资源，他就会把图片当成模块来解析，所以也需要引入相应的loader来解析。

.htm和.html的区别？.jpg和.jpeg的区别？
在早期的DOS操作系统中，后缀名只支持3位。后来的windows和linux系统就没有这个限制了。所以他们的本质都是一样的。

loader记录（注意先后顺序）：
css：style-loader css-loader
less：style-loader css-loader less-loader
图片：url-loader，可以设置limit的大小。当小于阈值时，图片会被转成base64编码。当大于阈值时，就会报错，因为需要file-loader（只需安装就行，不需要配置），此时就会把图片也打包到dist中，但是名字默认是32位哈希值（以免名字重复）。可以配置修改名字的格式。
ES6----->ES5：babel-loader

在webpack.config.js----->output中添加publicPath:‘dist/’
作用：以后任何涉及到url的东西，打包模块时都会在前面加上publicPath定义的值。（注意:只是影响打包的文件内容，不会影响打包的文件的存放位置）

vue会有2个构建版本
1.runtime-only----->代码中，不可以有任何的template
2.runtime-compiler----->代码中，可以有template，因为有compiler可以用于编译template。
报错解决：
resolve: {
extensions: [’.js’, ‘.vue’, ‘.json’],//配置此项引用文件时可以不加后缀名
alias: {
‘vue$’ : ‘vue/dist/vue.esm.js’
}
}

el和template的关系
同时存在时，template下的内容会替换掉el挂载的html内容。

什么是插件

webpack中的插件就是对webpack现有功能的扩展，比如打包优化，文件压缩。

loader和plugin的区别

loader主要用于转换某些类型的模块，他是一个转换器。
plugin是插件。它是对webpack本身的扩展，是一个扩展器。

plugin使用过程

步骤一：npm安装需要使用的plugins（某些webpack已经内置的不需要安装）
步骤二：在webpack.config.js引入
步骤三：在webpack.config.js中的plugins配置插件。

常用的plugin

BannerPlugin
HtmlWebpackPlugin：
1.自动生成一个index.html文件（可以指定模板），将index.html打包进dist
2.将打包的js文件，自动通过script标签插入到body中。
UglifyjsWebpackPlugin：

webpack-dev-server

webpack-dev-server的作用就是不用我们每次都手动打包（通过执行npm run build去调用webpack重新生成编译文件）
webpack-dev-server不会将开发调试中的编译文件写到磁盘上，而是放到内存中。因此，你在开发过程中看到的dist文件下的东西很有可能不是最新的。
换句话说，只有执行npm run build才会改变dist文件夹。
步骤：
1.安装webpack-dev-server
2.webpack.config.js配置devServer
3.package.json配置scripts

为什么要在package.json配置scripts中的一些映射？

根本原因是只有通过这种方式调用命令，它调用的才是本地(局部命令)，否则你在任何终端中直接输入命令，他都是去找全局命令。

webpack-merge