webpack 多页面脚手架，基于webpack的前端工程化开发解决方案

webpack 多页面脚手架，基于webpack的前端工程化开发解决方案

基于webpack的多页面脚手架

这个完全基于webpack4的配置，适用于一些官网产品类介绍的静态网页。

配置功能

css压缩,js压缩,less编译 动态设置HtmlWebpackPlugin实现多页打包配置 启动webpack-dev-server（自动刷新）

动态实现方法

多入口管理文件：src/package.json

[ { "url": "index", "title": "首页" }, { "url": "list", "title": "列表页" }]

webpack 配置根据这个多入口管理文件来生成 html 页面，不需要手动写多少个entry与new HtmlWebpackPlugin，这个解决了工作中遇到重复工作的问题。

注意：

在 webpack的entry配置上，设置为src/views/${page.url}/index.js，其实page变量是根据package.json来实现。 创建：任何页面这个路径必须是 src/views/页面名/index.js，同时 在package.json也要加上对应的url值，title值可空。

本项目使用包管理工具NPM，因此需要先把本项目所依赖的包-下来：

$ npm install

启动服务器

npm run devhttp://localhost:8080

理论上来说，webpack-dev-server会自动帮你打开浏览器并展示示例页面；如果没有的话，请手动打开浏览器，在地址栏里输入 http://localhost:8080，Duang！页面就出来了！

打包

npm run build

总结

使用 webpack 构建多页面的几个核心问题，虽然就是运用了 webpack 的多入口打包以及自动生成 HTML 的一个插件，但其中的缘由还是需要我们了解的。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。