之前也写过webpack学习记录,项目中需要一个常用的webpack多页面配置,所以才动手,本着能写一行是一行的原则,开始了配置webpack之旅。
定目录结构
首先我只需要开发环境(包含自动更新)和打包环境,初定的目录结构是这样的
app主要写业务代码,config里写webpack配置和一些打包、开发的配置,经过一番计较,最后根据自己习惯,目录结构如下:
配置webpack
按上面所说,建好文件后,在根目录新建webpack.config.js
然后全局安装webpack和webpack-dev-server
然后局部安装
这样我们的项目就可以引入webpack了,并且可以使用webpack-dev-server的相关功能了,webpack.config.js内容非常的简单,就是根据环境变量中指定的当前环境来加载不同的webpack配置即可:
在config文件夹下分别新建webpack.config.dev.js和webpack.config.product.js分别代表开发环境的配置和生成打包文件的配置,考虑到很多配置都会相同,再建一个webpack.config.base.js用来写统一的配置。
webpack.config.dev.js和webpack.config.product.js的区别是一个runtime时的配置,一个文件生成的配置,简而言之,就是开发环境的不同是配置webpack-dev-server,生产环境是压缩,map等配置
webpack.config.base.js文件才是webpack配置的主菜,包括entry、output、modules、plugins等
获得所有入口文件的文件夹
注入entry和生成HTMLWebpackPlugin
关于HTMLWebpackPlugin的用法,可以参照 以及 官方文档 已经写的非常详尽了。
第三方库入口自动获取
其中多页面入口和第三方库配置,请看这篇webpack中文站文档分离 应用程序(app) 和 第三方库(vendor) 入口
output 配置
webpack配置合并
主要用到一个webpack插件 webpack-merge,可把分开配置的config合并,分开生产环境和调试环境
最后奉上github地址: webpack-multi-skeleton ,有不对之处,请指正!