确认需求
我是react技术栈,所以手脚架生成的工程里必然是有react全家桶的。其余的一些webpack配置我决定参考一下开源的手脚架工具,这个配置应该都是大同小异。借此机会顺便梳理一下。
base.config
- html模板(html-webpack-plugin)
- css提取插件(extract-text-webpack-plugin)
- 公共模块提取插件(CommonsChunkPlugin)
- 热更新插件(webpack-hot-middleware)
- 出入口设置
- module里的loader设置。大概包括以下loader:处理js或jsx文件的babel-loader、处理css或less或sass的css-loader与postcss-loader(没搞懂这两个插件的区别到底是什么,好像css-loader更贴近css本身一些,而postcss-loader是做一些额外的工作)、处理图片的url-loader、处理字体文件的file-loader
- 会有一个resolve的配置项告诉我们怎么处理module,alias和extensions这两项都很方便开发
以上就是base.config的基本配置了,下面看一下其他的配置项还有哪些
- serverConfig。用于配置服务器跑代码用。这里会用到一个叫做open-browser-webpack-plugin自动打开浏览器的插件
- proxyConfig。远程代理的配置项,前后端分离开发,需要跨域请求,用这个配置。
- staticConfig。静态服务托管,这个目前没搞懂不知道怎么设置
开发环境的webpack配置
- webpack.HotModuleReplacementPlugin,这个插件也是用来做热加载的,网上有人说要和webpack-hot-middleware一起用,没搞懂,研究清楚了在补上。webpack官方文档是写的使用HotModuleReplacementPlugin来处理热加载。
- 自动打开浏览器页面。OpenBrowserPlugin
- DefinePlugin,用这个创建一个可以编译时期确定的全局常量,会用来做开发环境生产环境的判断
生产环境配置
- 代码丑化处理,uglifyJsPlugin
- 清理dist目录,CleanWebpackPlugin
这是差不多该有的配置,接下来应该搞定如何写一个手脚架了,准备使用yeoman,下来先做一些准备工作