build 存放编译生成后的文件
config 存在配置文件
public 存放一些不会打包到文件中的静态资源，比如用户的头像等
src

assert 存放会一起打包打出去的静态资源，比如图标等
components 存放定义的组建
pages 存放定义的页面
store 存放redux定义的一些数据
App.js 内容输出给index.js使用
index.js html引用的入口

一、单文件组件的组成结构
// 单文件组件的组成结构
<template>
	<!-- 这里用于定义Vue组件模板内容 -->
</template>

<script>
	// 这里定义Vue组件业务逻辑
	// export default暴露对象数据
	export default {
		data(){ return {} }, // 私有数据
		methods: {}, // 处理函数
	}
</script>

<style scoped> 
	/* 这里用于定义组件的样式 */
	/* scoped：防止组件样式之间的冲突问题 */
</style>

// 配置.vue文件的loader加载器

// 在 index.js 中，导入单文件组件 import App from './components/App.vue' 浏览器会报错
// 配置vue组件的加载器
	// 运行 npm i vue-loader@15.6.1 vue-template-compiler -D
	// 在 webpack.config.js 配置文件中，添加vue-loader 的配置项如下：
	const VueLoaderPlugin = require('vue-loader/lib/plugin')
	module.exports = { 
		module:{ 
			rules:[
				{test: /\.vue$/, loader: 'vue-loader'}
			]
		},
		plugins: [
			// ....... 其他组件
			new VueLoaderPlugin() // 请确保引入这个插件
		]
	}
// 安装之后，代码就不会报错，但是也没有任何效果，因为我们还没有正式使用vue代码

// 在webpack项目中使用vue

// 1、运行 npm i vue -S 安装 vue
// 2、在 srv -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
// 3、创建 vue 实例对象，并指定要控制的 el 区域
// 4、通过 render 函数渲染 App 根组件
import Vue from 'vue'
import App from './components/App.vue'  // 根组件
const vm = new Vue({
	el: '#app',
	// 通过 render 函数，把指定的组件渲染到 el 区域中
	render: h => h(App)
})

二、webpack打包发布
// 在package.json文件中配置webpack打包命令
// 改命令默认加载项目根目录中的 webpack.cconfig.js 配置文件
"scripts": {
	// 用于打包的命令
	"build":"webpack -p",
}
// 删除dist目录(打包发布之后，会生成dist目录)
// 执行命令：npm run build
	// 执行build命令，会执行webpack -p进行打包，而打包会参照webpack.config.js配置文件，查看入口和出口文件等等配置项
	// 打包成功之后，会生成dist目录，bundle.js与index.html文件

	

写在前面
这是webpack实战系列的第二篇：模块和模块打包。上一篇：webpack实战——打包第一个应用 记录了webpack的一些基础内容与一个简单的小例子，开启了webpack的实战之路，这一篇记录一下关于模块和模块打包。
模块
先看一下模块的定义：
模块,是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体)。它具有两个基本的特征：外部特征和内部特征。外部特征是指模块跟外部环境联系的接口(即其他模块或程序调用该模块的方式，包括有输入输出参数、引用的全局变量)和模块的功能；内部特征是指模块的内部环境具有的特点(即该模块的局部数据和程序代码)。
可以从定义中看出，每个独立的模块负责不同工作，彼此之间又可以联系在一起共同保证整体系统运行。那么在webpack中，如何将其打包成一个(或多个)文件呢？
想了解这些，我们还是先要熟悉在 Javascript 中的模块。在 Javascript 模块化中比较常见的有：
•CommonJS•ES6 module•AMD•CMD•UMD(AMD和CommonJS)•...
但由于在目前的使用场景中 CommonJS 和 ES6 module 居多，因此暂时就这两者进行讨论。
1. CommonJS
1.1 模块
在 CommonJS 中规定每个文件都是一个模块。
在 CommonJS 中，变量及函数的声明不会造成全局污染。如：
// add.jsvar name = 'name: add.js';// index.jsvar name = 'name: index.js';reuqire('./add.js');console.log(name);  // name: index.js
在上面 index.js 中通过 require 函数来加载 add.js ，输出的结果是 name: index.js ，说明在 add 中定义的变量并不会影响 index ，可以得出使用 CommonJs 模块，作用域只针对于该模块，而不会造成全局污染，对外不可见。
1.2 导出
前面说过模块拥有自己的作用域，那么模块是需要向外传递的，怎么办呢？ 导出是一个模块向外暴露自身的唯一方式。在 CommonJS 中，我们通过 module.exports 来导出模块中的内容。如：
// add.jsmodule.exports = {    name: 'add',    add: function(a, b) {        return a + b;    }}
在 CommonJS 内部会有一个 module 对象用于存放当前模块的信息。而 module.exports 则指定向外暴露的内容。
1.3 导入
导出自然是为了另外一个模块来使用，这时便使用到了导入功能。在 CommonJS 中，使用 require 来进行模块导入：
// add.jsmodule.exports = {    name: 'add',    add: function(a, b) {        return a + b;    }}// index.jsconst add = require('./add.js');const sum = add.add(1, 2);console.log(sum);   // 3
上面这个例子，便是在 index.js 中通过 require 导入了 add.js ，并且调用了其中的 add() 方法。
而我们在 reuqire 一个模块的时候，会分两种情况：
1.如果 require 的模块第一次被加载，那么会执行该模块然后导出内容；2.如果非首次加载，那么该模块代码不会再次执行，而是直接导出上次代码执行后所得到的结果。
有时候我们只想通过加载执行某个模块让它产生某种作用而不需要获取它所导出的内容，则可以直接通过 require 来导入而不需要定义：
require('./task.js');...
而通过这个特性，加上 require 函数可以接收表达式，那么我们则可以动态指定模块加载路径：
const moduleList = ['add.js', 'subtract.js'];moduleList.forEach(item => {    require(`./${item}`);});
2. ES6 Module
熟悉 JavaScript 语言的小伙伴知道，其实在 JavaScript 设计之初，并没有模块化这个概念。而伴随 JavaScript 不断的壮大发展，社区中也涌现出了不少模块化概念。一直到 ES6 ， JavaScript 终于正式的有了模块化这一特性。
2.1 模块
在前面我们使用 CommonJS 实现了一个例子来展示 CommonJS 的模块、导出与导入，同样在此处也先来一个例子，只需将上面例子稍微改写即可：
// add.jsexport default {    name: 'add',    add: function(a, b) {        return a + b;    }}// index.jsimport add from './add.js';const sum = add.add(-1, 1);console.log(sum);   // 0
ES6 Module 也是将每一个文件都作为一个模块，并且每个模块拥有自身的作用域，但是与 CommonJS 相比， 不同的是导入、导出语句。在 ES6 Module 中， import 和 export 也作为关键字被保留。
2.2 导出
在 ES6 Module 中，使用 export 来对模块进行导出。
export 导出的两种方式：
•命名导出•默认导出
2.2.1 命名导出
以下有两种写法，但其效果并无区别：
/*** 命名导出： 两种写法**/// 1. 声明和导出写在一起export const name = 'add';export const add = function(a, b) {    return a + b;}// 2. 先声明，再统一导出const name = 'add';const add = function(a, b) {    return a + b;}export { name, add }
as关键字
在使用命名导出时，如果用写法2(先声明再统一导出)，可以使用 as 关键字 来对导出的变量进行重命名。如：
const name = 'add';const add = function(a, b) {    return a + b;}// add as sum ： 在导入时，使用 name 和 sum 即可export { name, add as sum }
2.2.2 默认导出
说完了命名导出，来到默认导出：模块的默认导出只能导出一个。举例：
// 默认导出export defailt {    name: 'add',    add: function(a, b) {        return a + b;    }}
由上可见，我们可以将默认导出理解为向外输出了一个命名为 default 的变量。
2.3 导入
ES6 Module 中使用 import 进行模块导入。由于在 ES6 Module 的导出中，分为 命名导出 和 默认导出 ，因此在导入的时候也有对应的两种方式进行导入。
2.3.1 命名
// add.jsconst name = 'add';const add = function(a, b) {    return a + b;}export { name, add }// index.jsimport { name, add } from './add.js';console.log(name, add(1, 2));   // add 3
可以看到，在使用 import 对命名导出模块进行引入的时候， import 后面跟了一对花括号 { } 将导入的变量名包裹起来，并且变量名需要与导出时的变量命名一样。同样，我们还是可以使用 as 关键字 来对变量进行重命名：
// index.jsimport { name, add as sum } from './add.js'sum(2, 2);  // 4
值得注意的是，导入变量的效果相当于在当前作用域下声明了变量(如 name 和 add)，但不可对这些变量不能修改，只可当成只读的来使用。
当然，我们还可以使用 * 来进行整体导入：
// index.jsimport * as add from './add.js';console.log(add.name);  // addconsole.log(add.add(1, 1)); // 2
2.3.2 默认
对于默认导出的导入处理如下：
// add.jsexport default {    name: 'add',    add: function(a, b) {        return a + b;    }}// index.jsimport addMe from './add.js';console.log(addMe.name, addMe.add(2, 5));   // add 7
可以看到，如果是导入默认导出的模块，那么在 import 后面直接跟变量名即可，并且这个变量名无需与导出模块的变量名重复，可以自己指定新的变量名。
3. CommonJS 与 ES6 Module 的区别
介绍了 CommonJS 与 ES6 Module 的基础应用之后，我们也要了解到在实际的开发过程中我们经常将这两者在同一个项目中混用。为了避免不必要的麻烦，还是要说一下两者的异同。
3.1 动态与静态
CommonJS 对模块依赖的解决是动态的，而 ES6 Module 对模块依赖的解决是静态的。
首先要了解这里说的动态与静态是什么：
•动态：模块依赖关系的建立发生在代码运行阶段；•静态：模块依赖关系的建立发生在代码编译阶段；
由于 ES6 Module 中导入导出语句都是声明式的，不支持导入表达式类路径，并且导入导出语句必须位于模块的顶层作用域。相比 CommonJS ，具备优势如下：
•死代码检测和排除：可以使用静态分析工具检测出没有被调用的模块，减小打包资源体积；•模块变量类型检查：有助于确保模块之间传递的值或者接口类型的正确性；•编译器优化：ES6 Module 直接导入变量，减少层级引用，程序效率更高。
3.2 值拷贝和动态映射
在导入一个模块时，对于 CommonJS 来说获取的是一份导出值的拷贝，而在 ES6 Module 中则是值的动态映射，这个映射是只读的。例如：
// add.jsvar count = 0;module.exports = {    count: count,    add: function(a, b) {        count += 1;        return a + b;    }}// index.jsvar count = require('./add.js').count;var add = require('./add/js').add;console.log(count); // 0 (这里的count是对add.js中couunt的拷贝)add(2, 3);console.log(count); // 0 (add.js中变量值的改变不会对这里的拷贝值造成影响)count += 1;console.log(count); // 1 (拷贝的值 0 + 1 = 1，表示拷贝的值可以更改)
可以看出，index.js 中的 count 是 add.js 中 count 的一份值拷贝，因此在调用 add 函数时，即便更改了 add 中的 count，但不会对 index.js 中的值拷贝造成影响。
但在 ES6 Module 中，却不一样：
// add.jslet count = 0;const add = function(a, b) {    count += 1;    return a + b;};export { count, add };// index.jsimport { count, add } from './add.js';console.log(count); // 0 (对add.js中count值的映射)add(1, 1);console.log(count); // 1 (对add.js中count值的映射，会映射值的变化)count += 1; // 报错，该count值不可更改
4. 模块打包原理
前面描述了一些基础的 CommonJS 与 ES6 Module 模块化的一些知识，那么回到 webpack 中来：webpack是如何将各种模块有序的组织在一起的呢？
// add.jsmodule.exports = {    add: function(a, b) {        return a + b;    }}// index.jsconst add = require('./add.js');const sum = add(1, 2);console.log(`sum: ${sum}`);
还是之前的例子，但现在经过 webpack 打包之后，它会变成什么样子呢？
如图所示，这便是一个简单的打包结果。我们可以观察自己的 bundle.js 文件，从中看打包逻辑关系：
•首先一个立即执行匿名函数，包裹所有内容，构成自身作用域；•installedModule对象(模块缓存)，每个模块在第一次被加载的时候执行，到处结果存储到其中，以后再次调用模块直接取值即可，不会再次执行模块；•webpack_require函数：对模块加载的实现，在浏览器中可以通过调用此函数加模块id来进行模块导入；•modules对象：工程中所有产生依赖关系的模块都会以 key-value 形式放在此对象中， key 作为模块 id，由数字或者 hash 字符串构成，value 则由一个匿名函数包裹的模块构成，匿名函数的参数则赋予了每个模块导出和导入能力。
小结
本篇记录了关于 JavaScript 的模块化与 webpack 的模块打包原理简介。
首先，介绍了关于模块的概念，然后依次介绍了两种模块化：CommonJS 和 ES6 Module ，以及他们分别的模块概念、导出和导入，接着介绍了他们之间的两个差异：动态与静态、值拷贝和映射。最后，提及了一下模块化打包的简单原理，对webpack打包工作有一个大概认知。
下一篇将会介绍在webpack中资源的输入与输出。敬请期待。
学习推荐： 本系列学习资源多来自于 《webpack实战 入门、进阶与调优》 ，作者 居玉皓 ， 感兴趣的朋友可以购买实体书支持学习~
webpack实战——打包第一个应用 
常用验证码之滑动验证码|图形验证码
docker-nginx部署web项目

webpack如何配置多入口多出口打包
因为项目如果复杂的时候，入口肯定不止一个，下面来看，如何配置多个入口文件

我们在src目录下面创建一个新的入口文件

about.js
export default (a,b)=>{
	return a+b+666
}

来看一下我的目录结构：


webpack.config.js

改变entry的配置：
entry:{			//定义入口文件

index:"./src/index.js",

about:"./src/about.js"

}
改变entry的配置：
//这个name是自带的，代表入口文件的名称例如上面定义的：index或者about
output:{

filename:’[name].js’,			

path:path.resolve(__dirname,“dist”)			//默认

}
这个时候我们执行打包命令：npm run dev


可以看到我们多入口打包成功了。并且都引入到一个默认模板index.html当中。
多出口打包
那么上面我面多入口已经完成了，但是打包后都插入到默认的index.html当中了，只有这一个出口，下面看如何制造多个出口。
首先多出口肯定不止一个 模板文件，所以我们要在index.html的同级目录新建一个出口文件为 about.html



接下来我们需要去调整一下webpack.config.json文件下的plugins配置，因为我们之前只是单出口如图:



那么现在我们多入口应该如何写呢，看代码：
	plugins:[//设置插件使用
		new HtmlWebpackPlugin({
			template:"./index.html",	//设置打包后的文件,插入到的模板html文件是哪个(以来的模板文件)
			filename:"index.html",		//输出文件的名称(打包后的html文件名,可以自己设置,最好不要变动)
			hot:true,					//自动刷新浏览器
			chunks:['index']			//代表指定的入口文件是哪个
		}),
		
		//那么同理我们有两个出口是不是要配置两次，像这样
		
		new HtmlWebpackPlugin({
			template:"./about.html",	//设置打包后的文件,插入到的模板html文件是哪个(以来的模板文件)
			filename:"about.html",		//输出文件的名称(打包后的html文件名,可以自己设置,最好不要变动)
			hot:true,					//自动刷新浏览器
			chunks:['about']			//代表指定的入口文件是哪个
		})
	]

下面我们执行 打包命令：npm run dev


至此，我们的多出口打包也完成了。但是在这之间，有一个问题，就是我们在配置多出口文件的时候，出现了重复代码，这对于许多有强迫症的程序员是不能接受，毕竟，如果我们有一个两个出口，可以这样配置，如果有几十甚至更多呢，那这样就会多出很多不必要的代码，由此，我们可以封装一下。

封装方法如下：

1.我们首先要把出口文件定义成一个数组，然后进行map循环，我们只要返回HtmlWebpackPlugin这样一个实例就可以，拿到当前的实例对象，chunkName然后通过ES6 语法的字符串模板将当前值作为一个变量，分别设置当前入口文件的每个属性，就可以了。
const Htmlplugin =["index","about"].map(chunkName=>{
	return new HtmlWebpackPlugin({
			template:`./${chunkName}.html`,	//设置打包后的文件,插入到的模板html文件是哪个(以来的模板文件)
			filename:`${chunkName}.html`,		//输出文件的名称(打包后的html文件名,可以自己设置,最好不要变动)
			chunks:[chunkName],		//代表指定的入口文件是哪个
		})
})

紧接着，我们需要把示例放在plugins里面进行应用，map循环后生成的新数组，所以需要把Htmlplugin 这个数组打开，放在plugins里面，也是使用ES6里面的扩展运算符 “…”进行数组的展开，就可以了。
	plugins:[//设置插件使用
		new CleanWebpackPlugin(),		//通过new去执行.作用:清空输出的目录
		...Htmlplugin
	]

执行打包命令：npm run dev


同样多出口打包也成功过了。