webpack学习-好多字，我自己都不想复习

输出分析 启动webpack时，支持如下两个参数： --profile：记录构建过程的耗时信息 --json：以JSON的格式输出构建结果，最后只输出一个.json文件，这个文件中包括所有构建相关的信

使用Prepack 认识 Prepack 为了优化代码在运行时的效率，由FaceBook开源，在运行结果一致的情况下，改变远吗的运行逻辑，输出性能更好的js代码，实际上，Prepack就是一个部分求值

区分环境 为什么需要区分环境 在开发网页的时候，一般都会有多套运行环境，如： 在开发过程中方便开发调试的环境 发布到线上为用户使用的运行环境 虽然两套环境是从同一套代码编译过来，但是代码内容不一样：

使用自动刷新 文件监听 让webpack开启监听模式时，有如下两种方式： 在配置文件webpack.config.js中设置watch: true 在执行启动webpack的命令时带上--watch参

缩小文件的搜索范围 根据导入语句去寻找对应的要导入的文件 根据找到的要导入的文件的后缀，使用配置中的Loader去处理文件 以上两件事处理一个文件非常快，但是项目大，文件多，构建速度就会变慢，所以尽量

加载图片 使用file-loader file-loader可以将css和js文件里面的导入图片语句替换成正确的地址，同时将文件输出到正确的位置 使用url-loader url-loader可以经过

搭配Npm Script 认识Npm Script 是一个任务执行者，Npm是安装node时候附带的包管理器，Npm Script是Npm的内置功能，允许再package.json中使用scripts

Webpack实战之单页应用和管理多个单页应用的页面构建问题与解决方案：为单页应用生成HTML 引入问题 以上所有的栗子都是只输出一个bundle.js文件，才能让应用再项目中运行起来，但是实际的项目

使用React框架 React语法特征 有jsx和class语法 jsx语法无法在现有的任何js引擎中运行，所以构建的时候需要将源码转化成可以运行的代码 React与Babel 在Babel项目中接入

Webpack实战使用新语言来开发，es6/ts/flow/scss/postcss等语言分别构建。

按照配置所影响的功能划分 *entry-配置模块入口 context webpack寻找相对路径的文件时候，以context位根目录，context默认为执行启动webpack时所在的当前工作目录 c

安装 1、先使用npm init初始化一个web项目 2、根据需要安装webpack 安装最新的稳定版：npm i -D webpack 安装指定版本：npm i -D webpack@ 安装最新的体

为什么需要构建 源代码无法直接运行，需要转换成浏览器可以识别的js，html和css代码 构建包含的内容 代码转换 文件优化 （压缩...） 代码分割 模块合并 自动刷新 代码校验 自动发布 构建工具