wepback学习笔记

npm init -Y //创建package.json 文件
npm install webpack webpack-cli --save-dev //安装 webpack-cli
npm install webpack-dev-server --save-dev

规范

AMD（Asynchronous Module Definition） require.js 实现AMD规范
ES Module规范 浏览器端 ECMAScript 2015(ES6)
CommonJS规范 Node环境

ES Module规范 语法

export { name, hello, Person }  //花括号是语法
export {
name as default, hello as fooHello
}
export default name         //  export default + 对象
import { default as fooName } from './module.js'  //固定用法
import abc from './module.js'
 
 //ES Module  import要填写完整路径
import {} from './module.js'  简写 import './module.js'

Node.js 从版本 13 开始支持 ECMAScript 模块（ESM）。在 Node.js 中，可以使用 import 和 export 关键字来导入和导出模块。但是需要注意的是，使用 ESM 时需要在文件扩展名为 .mjs，或者在 package.json 中设置 "type": "module"。同时，Node.js 仍然支持 CommonJS 模块，可以使用 require 和 module.exports 关键字来导入和导出模块。

image.png

m.mjs es module规范; cjs.js commonjs 规范

image.png

browser-es-module-loader

<script nomodule src='dist/babel-browser-build.js'></script>
<script src='dist/browser-es-module-loader.js'></script>
// https://unpkg.com/ 提供了CDN eg.https://unpkg.com/browser-es-module-loader

npm install promise-polyfill --save-exact //ie 不支持 promise