Webpack

HMR 热模块替换 作用：一个模块发生变化，只会重新打包这一个模块；极大提升构建速度 样式文件：可以使用 HMR 功能，因为 style-loader 内部实现了 js 文件

认识 Vue App.vue 文件代表一个单文件组件，它是项目唯一的组件，也是根组件： main.js 入口文件： 接入 Webpack 修改 Webpack 相关配置如下...

认识 TypeScript TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器。 你需要在当前项目根目录下新建一个用于配置编译选项的 tsconfig.

认识 SCSS SCSS是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素 再执行编译命令： 你就能在源码同目录下看到编译后的 main.css 文件。

React 语法特征 使用了 React 项目的代码特征有 JSX 和 Class 语法，例如： 其中 JSX 语法是无法在任何现有的 JavaScript 引擎中运行的，所以在构建过程中需要...

认识 PostCSS PostCSS 是一个 CSS 处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的 PostCSS 的用处非常多

认识 Flow 使用 Flow 安装，安装完成后通过先配置 Npm Script 通过 npm run flow 去调用 Flow 执行代码检查。

Babel 在 Babel 执行编译的过程中，会从项目根目录下的 .babelrc 文件读取配置。.babelrc 是一个 JSON 格式的文件

Target target值 描述 web 针对浏览器 (默认)，所有代码都集中在一个文件里 node 针对 Node.js

通常你可用如下经验去判断如何配置 Webpack： 想让源文件加入到构建流程中去被 Webpack 控制，配置 entry。 想自定义输出文件的位置和名称，配置 output。 想自定义寻找依赖模块时

devServer hot devServer.hot 开启模块热替换功能后将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览

Module 在 Loader 需要传入很多参数时，你还可以通过一个 Object 来描述，例如在上面的 babel-loader 配置中有如下代码： noParse 例如想要忽略掉...

Resolve alias resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。