<!--html文件模板--> <body> <div></div> <script src="<%= htmlWebpackPlugin.options.vue_path %>"></script> <script src="<%= htmlWebpackPlugin.options.elementUI_path %>"></script> <script src="<%= htmlWebpackPlugin.options.tpl_entryPath %>/index.js"></script> </body> //webpack.prod.js module.exports = { //... plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html',//生成index.html时依据的模板 filename: '.....', inject:false, tpl_entryPath:'....', vue_path:'.....', elementUI_path:'.....', }), //new BundleAnalyzerPlugin() ], }
最终打包后生成的index.html文件大致如下：
<body> <div></div> <script src="https://www.jb51.net/{{publicRoot}}/{{publicLib}}/vue.min.js"></script> <script src="https://www.jb51.net/{{publicRoot}}/{{publicLib}}/element-ui.js"></script> <script src="https://www.jb51.net/public/A/A.js"></script> </body>
如果第三方库从本地加载，则需要将/node_modules/element-ui/lib/index.js和/node_modules/vue/dist/vue.runtime.min.js两个依赖文件拷贝到lib文件夹中的对应地址，这样访问index.html时就可以以外部依赖的形式将其加载进来。样式文件的剥离直接使用插件完成即可，webpack4以前的版本使用extract-text-webpack-plugin,从4.0版本后统一使用mini-css-extract-plugin。
3. 为webpack定制多入口
多入口的配置是多页面应用打包的关键，由于打包结果存在嵌套目录，所以需要对entry对象的键值进行一些定制，打包后的路径信息是直接通过key值来定制的，同时需要实例化多个HtmlWebpackPlugin来为每一个入口文件生成一个对应的index.html访问入口，定制参数可以在实例化时传入：
//webpack.prod.js module.exports = { entry:{ 'C/index':'./src/pages/C/C.entry.js', 'DESK/D/index':'./src/pages/D/D.entry.js', 'DESK/E/index':'./src/pages/E/E.entry.js' } //... plugins:[ new HtmlWebpackPlugin({...paramsC}), new HtmlWebpackPlugin({...paramsD}), new HtmlWebpackPlugin({...paramsE}), ] }
当然你可以将entry或plugins数组的组装过程剥离到其他文件中，然后直接引用：
当然，每个页面的入口文件X.entry.js相当于旧方案中main.js文件中移除被注释掉的未启用路由信息后剩余的部分，它足以支撑每个单页独立被访问。
四. 小结
经上述改造后，在dist目录中输出的结构和需求中public目录下的结构就保持一致了，而且每个页面的index.js文件也缩小到了100K左右。当然你也可以使用node.js去编写一些自动化脚本，将后续的替换过程也自动化，或者继续对webpack的打包过程进行优化，本文就不再赘述了。
以上所述是小编给大家介绍的Vue+ElementUI项目使用webpack输出MPA的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: