webpack3+react构建应用

webpack

webpack是一个打包工具，学名叫做模块打包器，把所有的模块打包成一个或少量文件，使你只需加载少量文件即可运行整个应用，而无需像之前那样加载大量的图片，css文件，js文件，字体文件等等。

相对于gulp/grunt的自动化构建工具来说，webpack在js，css压缩，代码检查，编译方面会相对弱一点。因为插件不够广泛。所以会有人把两者结合起来用，一个更好的方式是用npm script代替gulp去完成任务。

一个完整的配置是这样的。有点点多，但是没关系。其中一部分其实是完全用不到的

打包js

需要制定entry和output，在js文件中使用import语法去书写模块依赖。就可以顺利的加载所有的依赖了

module.exports = { ???entry: ‘./src/index.js‘, ???output: { ???????path: path.resolve(__dirname, ‘./dist‘), ???????filename: ‘bundle.js‘ ???}}

loader 和 plugin，有什么区别？
loader (加载器)，重在“加载”二字，是用于预处理文件的，只用于在加载不同类型的文件时对不同类型的文件做相应的处理。而 plugin (插件)，顾名思义，是用来增加 webpack 的功能的，作用于整个 webpack 的构建过程。在 webpack 这个大公司中，loader 是保安大叔，负责对进入公司的不同人员的处理，而 plugin 则是公司里不同职位的职员，负责公司里的各种不同业务，每增加一种新型的业务需求，我们就需要增加一种 plugin。

模块热替换（HMR）

只更新发生变更（替换、添加、删除）的模块，而无需重新加载整个页面（实时加载，LiveReload），这样可以显著加快开发速度，一旦打开了 webpack-dev-server 的 hot 模式，在试图重新加载整个页面之前，热模式会尝试使用 HMR 来更新。