当前项目中已经有一个 webpack.config.js 配置文件并且运行良好，但是这个配置只适用于开发环境, 开发环境和生产环境的项目构建目标不一样.

前文一步步学Webpack4（0）-- 实战起步已经完成了Webpack环境的搭建以及实现了一句命令自动打包项目，这一次我们继续使用之前的项目webpack-stepbystep来尝试搭建适合对开发者友好的项目开发环境.

最近由于学习需求，手撸了个简单的SPA框架并使用Webpack4做打包和预览调试，由于没有怎么系统学习过Webpack所以遇到坑挺多，索性直接开始从头学一波顺便记录下来.写Webpack文章不写版本都是耍流氓，这篇文章基于当下最新的 webpack v4.22.0 以及 webpack-cli v3.1.2 编写.

上一章我们使用webpack对项目进行了工程化改造，实现了从简单系统到多模块系统的打包升级，你可能以为现在就完成了webpack的配置，但是实际上现在项目还是处于webpack入门级配置的程度。调试一下代码就会发现，除了比原先项目变得稍微整洁以及完成了app.js模块引入之外，仍然有很多不足：

"手动是不可能手动的了，这辈子都不可能手动的了。" 一、目标 上一章我们借助ngRoute，完成了口袋妖怪SPA系统的多模块导航开发，但是现在引用的东西越来越多，项目文件目录开始变得混乱不堪： 现在先对当前项目文件列表进行整理，将五大模块移入src文件夹中： 然后修改index.html中的js引用路径： {代码...} 再分别修改...