初始化并安装相关包配置创建webpack.config.js入口文件main.js子组件store展示页其他配置打包打包后完整目录，现在index.html就能成功展示了！

缓存可以降低网络流量，使网站加载速度更快。然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。 我们可以通过必要的配置，确保 webpack 编译生成的文件能够被客户端缓存，…

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。 这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。 在代码分离（…

代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。 入口起点：使用 entry 配置手动地分离代码。 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。 动态导入：通过模块的内联函数调用来分离代码。 …

在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。 在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的…

Webpack在live reload（修改代码自动刷新页面）的基础上又进了一步，可以让代码在网页不刷新的前提下得到最新的改动，甚至不需要重新发起请求就能看到更新后的效果。这就是模块热替换功能（Hot ModuleReplacement，HMR） HMR对于大型应用尤其适用。试…

1. 使用观察模式 在观察模式下，如果其中一个文件被更新，代码将被重新编译。 2. 使用webpack-dev-server（推荐） webpack-dev-server 为提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。 这个时候会发现…

JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。这可以帮助我们追踪到错误和警告在源代码中的原始位置。