从0到1，细说 React 开发搭建那点事

增加一个名为module.js的文件：

在原来的entry.js增加引用：

然后同样执行webpack打包命令：

然后在打开index.html，会发现我们新增加的module.js的内容被正确输出。这是因为我们在页面中通过nodejs的require的方式引入的module.js，而使用webpack打包时会自动在依赖关系中引入module.js。

3）加载器

webpack提供了一个非常强大的loader功能，这个功能可以用于管理各种依赖关系模块，在webpack中所有的文件都视作一个模块。

首先npm导入webpack loader：

添加一个用于测试的style.css文件：

在entry.js中添加引用：

使用命令行打包：

会发现css的样式生效了。可以将繁琐的“!style!css!./style.css”简写成"./style.css"。

4）使用配置管理

细心的人会发现，我们每次使用命令行打包都带了大量的参数，这样不仅繁琐更不利于规模化使用。webpack同样可以使用标准化配置文件来替代命令行中的各种参数。

webpack的配置文件是nodejs的文件，通常命名为 webpack.config.js。我们在工程中增加配置文件：

现在，我们在命令行中输入webpack就可以实现和前面一样的打包。

● 丰富打包输出内容

可以使用：

命令来丰富打包输出的内容，更容易了解出现的问题。

● 监听更新模式

在我们进行编码开发的时候，每次对文件的编辑我们都想立即看到编译效果，如果每次编辑都要去打包，会非常麻烦。webpack提供了一个监听模式（类似grunt的watch），用于监听每次对文件的修改，修改后会立即进行增量更新。启用监听模式：

监听模式使用的是内存增量更新。webpack会将所有需要打包的文件copy到内存，然后监控文件修改，如果文件发生了修改，会将修改的文件替换内存中的对应文件。因此开发完之后，切记进行一次手动打包才能生效。

● 开发环境模式

webpack更强大的是，他整合了nodejs的express提供了一个静态服务器。（虽然没有官方正式，我觉得webstrom和微信本地开发环境都是整合的nodejs的express）

使用了开发环境模式，我们所有的动态修改和操作都可以实时看到效果，并且解决了静态资源各种路径引用的问题。首先npm安装工具：