Webpack实战-阅读笔记

2020/05/25

第一章：

output.path需要使用绝对路径。否则会提示：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "src/test" is not an absolute path!
   -> The output directory as **absolute path** (required).

如果不写：Nodejs的路径拼装函数-path.join将__dirname与dist拼接起来，形成最终的路径。

webpack-dev-server:

• webpack打包工具；
• 作为webserver
• 自动刷新 live-reloading

webpack-dev-server实际上并不会将编译结果放置到硬盘上，而是将打包结果放在内存中。

 

第二章：

CommonJS目前一般情况下，指的是Node.js中的版本。但实际上，CommonJS自身那套有自己特定的标准：

CommonJS中规定每个文件是一个模块。原始JavaScript中的作用域-全局和CommonJS引用的作用于-模块内。

 

ES6 Module：

2015年6月，ES6发布，从此JS语言才具备了模块这一特性。

导出的三种模式：

一、命名导出
1、export const name="calculator";
2、const name = '123';
const add = function (a, b) { return a+b;}

二、默认导出只能有一个
export default {
    name : "test",
    add: function (a, b) {return a+b}
}

复合形式：

导入之后，立即导出。命名导出的可以采用复合写法：export {name, add} from './calculator.js'

 

ES6 module、CommonJS对比

动态与静态：

• 死代码检测和排除。
• 模块变量类型检查。
• 编译器优化

值拷贝与动态映射：

• 属性值拷贝而非对象地址

循环依赖：

• CommonJS无法快速处理

 

几种引用方式：

CommonJS

ES6 module

如何引用非模块化文件？

AMD

UMD