前面HMR和source-map是开发环境下的优化，下面我们要为生产环境优化一下，首先就是缓存。

【编者按】本文为《Building modular javascript applications in ES6 with React, Webpack and Babel》的简译内容，讲述了作者基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用的编程心得。

如果你想用React构建一个新的JavaScript应用，而且你还想实践ES6语法中的新特性，此外，你甚至想创建一些可重用组件并发布到NPM上，那么你究竟应该怎样实现这些需求？你如何将ES6代码发布到NPM，又如何在后续的项目中使用这些代码？我花了一些时间解决上面这些问题，现在我愿意与你们分享我习得的新知识。

之前我们用style-loader将js中的样式放入到了一个style标签中，访问html的时候会把style标签通过js的方式插入到了head里，此时，css是与js混在一起的。这样不仅会增加js的体积，而且css内容多的话，访问html还会出现闪屏的情况。为了解决这个问题，我们需要引入一个插件来把样式文件分离出来。

现在我们每次更改src目录下文件的时候，都需要手动运行一下打包命令，这是非常不利于开发体验的，因此，我们需要改良一下，引入webpack-dev-server。

1.npm install webpack -g 全局安装webpack

作为快 7 年的前端开发，有时会参与公司的招人面试，面试的对象主要是初中级前端人员。一般会先围绕项目经历问一些问题，随后就问一些前端基础知识。下面就谈谈个人常问的一些基础技术问题。

CSS

在多人开发中，代码里有时候会有一些无用的代码，因此在生产环境打包构建的时候就需要去除掉，我们可以使用webpack默认的tree shaking。必须满足以下两个条件：

1. 概述

当运行

自己书写一个npm包并发布到npm上面