1、Next.js

Two Forms of pre-rendering

Static Generation（静态生成）：HTML片段在构建时生成，在请求时复用
Server-pre Rendering（服务器端渲染）：在请求时重新生成。

2、Webpack Getting Started

入口(entry)：指示webpack应使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
```
//例子 Webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
};
```
- dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载，不能够被循环引用。
- filename: 指定要输出的文件名称。
- import: 启动时需加载的模块。
- library: 指定 library 选项，为当前 entry 构建一个 library。
- runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
- publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。
输出(output)：一般包含path与filename字段，通过path告知Webpack在哪个路径下输出创建的bundle，通过filename对文件进行命名。

const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

loader :由于Webpack初始仅能读取Js与Json文件，具有局限性，因此Webpack官方提供了loader，这个方法能够让Webpack处理其他任何类型文件并且转化为有效模块。
- loader有两个属性分别为test、use。
- test: 识别哪些文件能够被转换，其中书写的正则表达式，不用加引号，意义将会不同。
- use: 用那种类型的loader进行转换。
```
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
```

插件(Plugin): 相当于玩城市天际线的时候加的模组，适当的添加，能够优化玩家体验。然后想要添加“模组”就要访问“创意工坊”，这里所谓的“创意工坊”在Webpack中就是指’require(xxx)’

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
  rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

模式(Mode): 通过选择 development, production 或 none 之中的一个，来设置 mode 参数，可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
```
module.exports = {
mode: 'production',
};
```

3、CommonJs && AMDJs && ES6 Module
CommonJs(同步任务)
Node应用由模块组成，采用CommonJs模块规范，在某种意义上来讲，应该属于服务端规范，而如果想在浏览器（客户端）上显现，需要broswerify库进行转化。
CommonJs被区分为两部分，module对象以及require命令。
- 1、Module对象
  - Node内部会提供一个Module的构建函数，所区分的模块均为Module的实例。
  - Module对象拥有ID、filename等属性，其中用到较多的为exports，用于将模块内容进行暴露使用。
- 2、Require命令
  - Node内置require，使用require加载模块文件。
  - 需要留意的是，在第一次加载该模块文件的时候，Node内部会对其进行缓存，再次加载时，便直接从缓存中取。
  - 这种加载机制所表现的是输入的值是被输出值的浅拷贝。模块组件不会收到引用影响。
```
// 例子
module.exports = {
name: 'ysl',
age: '27'
}
//在外部可以通过require导入进行访问
let obj = require('./a.js')
console.log(obj)  // { name: 'ysl', age: 27 }
```

AMD(异步任务)

AMD采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD模式，目前在require.js库实现。
AMD模式，需要有一个主模块，该模块依赖于其他模块的入口，并同样定义有require函数来加载模块，但写法也有较大区别。
而关于分区模块，AMD提供了define函数 ```javascript // index.js 　require([‘moduleA’, ‘moduleB’, ‘moduleC’], function (moduleA, moduleB, moduleC){ 　　　　// some code here
```
 // 可以在这里编写模块加载后的代码
```
　}); // require()函数接受两个参数: // 第一个参数是一个数组，表示所依赖的模块[‘moduleA’, ‘moduleB’, ‘moduleC’] // 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用 // 注意[‘moduleA’, ‘moduleB’, ‘moduleC’]这里面的三个模块与index.js在同一个目录

//define函数 // moduleA.js 　　define(function (){ 　　　　var add = function (x,y){ 　　　　　　return x+y; 　　　　}; 　　　　return { 　　　　　　add: add 　　　　}; 　　}); // index.js require([‘moduleA’], function (moduleA){ 　　　　console.log(moduleA) //moduleA就是moduleA.js模块传入的函数执行后返回的对象{add：function} 　}); ```

http://huangxuan.me/js-module-7day/#/

Intern-learn

2021.7.29 Next.js/Webpack/AMD/Common

1、Next.js

Two Forms of pre-rendering

2、Webpack Getting Started

AMD(异步任务)