Webpack 前端工程化之路

这里需要实现js组件或文件版本号管理，非覆盖式发布，生成资源配置文件asset.js.json供php后端读取配置动态输出资源路径，减少后端人员误操作引起前端方面的种种Bug。

=======================================================================================================
约定：
每个页面通常包含类库文件 (libs.js)，公共js(common.js) ，组件js(如：dialog.js，select.js….)， 和自身业务js文件。
其中 公共js，组件js全局只维护一个，单独成一个请求，防止依赖打包后如果有修改涉及到修改的都要重新打包的问题。

步骤1：

首先建一个 demo目录

页面 home.search.html 有一个按钮，点击按钮弹出一个自定义的对话框 $.dialog() 显示URL指定key的参数值，并异步加载 underscore.js

home.search.html:

static/js/page/home/search.js ：

步骤2：

webpack配置文件 webpack.home.search.js
这里把 jquery 抛出在全局使用，dialog弹窗挂载在jquery 下

javascript 代码

步骤3：

运行webpack webpack.home.search.js 生成asset目录 和 资源表asset.js.json文件：

步骤4：

在home.search.html文件引入js资源文件(按先后顺序引入)：

运行html点击按钮 弹出了url上key的参数：

对于只有简单的小项目来说基本满足了需求。

对于稍大的项目来说问题出来了？

1.assets-webpack-plugin 生成的资源路径json对象，没有明显的模块区分，如果多个模块下都有 search.js 就麻烦了
2.assets-webpack-plugin 生成的资源路径json对象没有顺序可言，后端动态输出后JS有可能会报错
3.如果使用了异步加载，assets-webpack-plugin 也会生成该路径到.json文件如上underscore.js，动态输出时也一并输出请求了，这是不允许的。
4.如果有多个页面都引入了dialog.js，后面发现dialog.js有Bug要修改，这下就麻烦了，涉及到的页面都要重新打包才能生效。

我们需要的资源列表：

json 代码

===================================================================================================

注解：

home模块,user模块下分别有搜索页和文章页(同名的业务js)。

全局公共模块common.js,dialog.js… 置于json对象顶级,全站共同维护一份,以防有修改后涉及到的业务重新打包的问题

页面如果使用该全局模块,直接配置成true,后端判断为true直接查找顶级同名属性动态输出即可。

===================================================================================================

assets-webpack-plugin-new：

针对上面的问题必须对assets-webpack-plugin插件增加一些功能，这里保存了原插件所有原有的功能，添加了一些没有的功能,提交合并无果,索性发布一个 assets-webpack-plugin-new

添加功能：

1.忽略模块：打包后忽略要生成到资源路径.json文件的模块 如：异步加载的不能同步输出路径
2.模块排序：按先后顺序排列资源路径，以便于后端动态输出
3.公共模块：全站公共模块维护一份
4.打包模块：如：user 模块
5.入口文件: 如：user/main.js

再次打包#####

安装 npm install assets-webpack-plugin-new –save ，

修改 webpack.home.search.js 配置文件，require(‘assets-webpack-plugin-new’) ，修改 new AssetsPlugin({}) 里面的配置参数：

删除根目录下的 asset.js.json文件 或设 new AssetsPlugin({update:false});

再次运行 webpack webpack.home.search.js 成功后生成 asset.js.json

里面没有了异步加载的underscore.js路径，公共模块置于对象顶层， 按照我们想的顺序排列了，php 可以直接读取输出。

再次测试#####

按照这样我们再测试一个用户中心下面的添加文章页面点击按钮显示用户信息，这儿做法同理只需要修改相应的配置，就不再显示详细代码直接看生成的asset.js.json

这得到了我们想要的结果。。。。但是发现了一个问题打包后 common.js，和 dialog.js 的版本号在变化，我并没有修改里面的代码，虽然不影响使用，但这也是不允许的！！！！

这是webpack 一个机制问题，这里就不讨论了 怎么解决呢？？

这里我使用了一个 webpack-md5-hash 插件，引入webpack-md5-hash 在plugins里面使用 new WebpackMd5Hash() 这样每次得到的就相同了，到此就解决了该问题。

当然这还有很多优化的地方，比如 jquery 也可以直接放在全局里，home,user配置文件可以是一个。。。。。。

====================================================================================================

这样站点静态资源统一由前端提供资源配置表.json文件，php后端动态读取输出JS路径就完成了！查看demo源文件