ES6模块导入、导出
1、命名导出：
var config = { version:'1.0.0' }; //一定要导出模块 export {config};
或直接导出
export var config = { version:'2.0.0' };
也可以导出函数
//导出命名函数 export function test() { console.log("test"); }
也可以像这样连续导出
//第一种方式： var person={ name:"张三", age:18 }; //导出命名函数 var test = function() { console.log("test"); }; //同时导出person对象和test函数 export {person,test};
也支持常规函数写法：
//第一种方式： var person={ name:"张三", age:18 }; //导出命名函数，这里可以常规命名 function test() { console.log("test111"); }; //或者 export {person,test};
导出的时候可以使用as对变量进行重命名
//第一种方式： var person={ name:"张三", age:18 }; //导出命名函数 function test() { console.log("test111"); }; //这里的test使用as进行了重命名 export {person,test as MyTest};
注意重命名后导出的变量也要对应：
import {MyTest} from './add-content.js';
import {person} from './add-content.js';
console.log(person);
MyTest();
2、命名导入
加载带有命名导出的模块时，import后面要跟一对大括号来将导入的变量名包裹起来，并且这些变量名需要与导出的变量名完全一致。导入变量的效果相当于在当前作用域下声明了这些变量（name和add），并且不可对其进行更改，也就是所有导入的变量都是只读的。
import {test} from './add-content.js';
import {person} from './add-content.js';
import {config} from './add-content.js';
import func from './add-Content';
console.log(config);
console.log(person);
test();
func();
//也可以使用{}一次包裹两个变量 import {MyTest,person} from './add-content.js'; console.log(person); MyTest();
与命名导出类似，我们可以通过as关键字可以对导入的变量重命名。如：
//这里将MyTest再次重命名为importtest import {MyTest as importtest,person} from './add-content.js'; console.log(person); importtest();
使用import*as<myModule>可以把所有导入的变量作为属性值添加到<myModule>对象中，从而减少了对当前作用域的影响。
//在导入多个变量时，我们还可以采用整体导入的方式 import * as alltest from './add-content.js'; console.log(alltest.person); alltest.MyTest();
3、默认导出
与命名导出不同，模块的默认导出只能有一个
export default function() { console.log("默认的导出"); }
4、默认导入
import func from './add-Content.js';
func();
二、打包执行
依次执行以下命令：
//NPM初始化，会在目录中生成一个package.json文件，它相当于npm项目的说明书，里面记录了项目名称、版本、仓库地址等信息 npm init //同时安装webpack以及webpack-cli。webpack是核心模块，webpack-cli则是命令行工具 npm install webpack webpack-cli --save-dev //打包命令，指定入口文件和出口文件 //从入口文件处开始查找依赖并打包 npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
使用npm scripts从上面的例子不难发现，我们每进行一次打包都要输入一段冗长的命令，这样做不仅耗时而且容易出错。为了使命令行指令更加简洁，我们可以在package.json中添加一个脚本命令。编辑工程中的package.json文件：
添加了build部分：
{ "name": "test", "version": "1.0.0", "description": "说明", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --entry=./index.js --output-filename=bundle.js --mode=development" }, "author": "feeling", "license": "ISC", "dependencies": { "webpack": "^5.27.1", "webpack-cli": "^4.5.0" } }
scripts是npm提供的脚本命令功能，在这里我们可以直接使用由模块所添加的指令（比如用“webpack”取代之前的“npx webpack”）。
现在，我们可以直接使用简单的命令来代替上面冗长的命令了：
npm run build
Webpack默认的源代码入口就是src/index.js，通过情况下，工程源代码放在/src中，输出资源放在/dist中，在工程中创建一个src目录，并将index.js和add-content.js移动到该目录下。对于资源输出目录来说，Webpack已经默认是/dist，我们不需要做任何改动。
现在可以省略掉entry的配置了。编辑package.json：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --output-filename=bundle.js --mode=development" },
执行
npm run build
我们会得到同样的输出结果。
三、使用配置文件
查看npm和npx的帮助命令
npx webpack -h
npm webpack -h
从之前我们在package.json中添加的脚本命令来看，当项目需要越来越多的配置时，就要往命令中添加更多的参数，那么到后期维护起来就会相当困难。为了解决这个问题，可以把这些参数改为对象的形式专门放在一个配置文件里，在Webpack每次打包的时候读取该配置文件即可。Webpack的默认配置文件为webpack.config.js（也可以使用其他文件名，需要使用命令行参数指定）
webpack.config.js的文件内容如下：
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js' }, mode: 'development' // 设置mode }
现在我们可以去掉package.json中配置的打包参数了：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack" },
执行
npm run build
可以得到正确的结果
入坑提示：
webpack和webpack-dev-server会产生兼容问题，对应安装的版本如下：
"webpack": "^3.6.0", "webpack-dev-server": "^2.9.1"
安装命令如下：
npm install webpack@3.6.0 --save-dev
npm install webpack-dev-server@2.9.1 --save-dev
webpack.config.js配置如下：
去掉mode配置
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js' } }
