ES6的模块化与手写webpack

1.ES6的模块化

ES6模块化规范中的定义 ① 每个js文件都是一个单独的模块

② 导入模块成员使用import关键字

③ 导出模块成员使用export关键字

1.1 默认导入与默认导出

1.2 按需导出与按需导入

1.3 直接导入并执行模块化代码

2. webpack

2.1 简述

webpack是一个当前比较流行的前端构建工具。他目前提供了友好的模块化支持,代码压缩混淆，处理js兼容性问题，·性能优化等的支持，可以更好的让前端程序员更多关注业务开发问题。

2.2 安装webpack

2.3 目录结构及基本使用

DOS常用命令

2.4 webpack核心(即配置文件)

webpack的出口入口文件配置

plugins(以html-webpack-plugin为例)

-   title: 用来生成页面的 title 元素

-   filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。

-   template: 模板文件路径，支持加载器，比如 html!./index.html

-   inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，* * 如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。

-   favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。

-   minify: {} | false , 传递 html-minifier 选项给 minify 输出

-   hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。

-   cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。

-   showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中

-   chunks: 允许只添加某些块 (比如，仅仅 unit test 块)

-   chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'

-   excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)