web前端开发工具demo 在webpack中如何实现多页面开发

对于前端开发比较关注的小伙伴们一定非常关心web前端开发工具demo 在webpack中如何实现多页面开发，今天我爱编程网小编为大家整理了以下内容，下面一起来看看吧。

在webpack中如何实现多页面开发

这篇文章主要介绍了webpack多页面开发实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
写在前面
webpack是一款模块加载器兼打包工具，能把js,css,页面，图片，视频等各种资源，进行模块化处理。而现在网上流传很多单页面的webpack模型，那多页面呢？比较少，现在我提供一个多页面的前端模型。希望大家适合使用。
在最开始接触webpack的时候，我都觉得webpack只适用于单页面应用，比如webpack+react，webpack+vue。我自己在使用webpack+vue构建项目及开发的过程中感受到了webpack的强大和方便。基于实际项目需求，我在想，多页面站点是否也能使用webapck来构建呢？于是就开始了一番探索，最终算是搭建了一套比较完整的解决方案。
本文以一个实际项目为例子，讲述在多页面项目中如何使用webpack进行工程化构建。本文是自己的实践经验总结，所以有些解决方案并不是最优的，仍在探索优化中，如果有什么错误纰漏，欢迎指出。
简介
本项目主要基于webpack2.x构建，以gulp作为辅助工具。前端使用art-template作为模板引擎，一个页面对应一个模板文件和一个入口文件，入口文件中可以通过import或require引入其他模块，这些模块webpack会自动跟入口文件合并为一个文件。
前端开发环境搭建
主要目录结构
├─dist #打包后生成的文件目录
└─src #开发目录
├─components #通用组件
├─static #静态资源目录
│ ├─css
│ ├─img
│ └─js
│ ├─component #站点通用组件对应的js
│ ├─lib #第三方js库
│ ├─services #各页面入口
│ └─util #通用工具js
├─template #html模板
└─views #页面
main.js #公共入口
gulpfile.js #gulp任务配置
package.json #项目依赖
webpack.config.js #webpack配置webpack配置
入口文件
// 获取入口文件
var entries = (function() {
var jsDir = path.resolve(__dirname, 'src/static/js/services');
var entryFiles = glob.sync(jsDir + '/*.js');
var map = {};
entryFiles.forEach(function(filePath) {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
map[filename] = filePath;
});
return map;
})();该方法将生成文件名到文件绝对路径的map， 比如
entry: {
'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}热更新
热更新简直不要太好用，极大地提高了开发效率。
//服务器配置
var devServer = env === 'production' ? {} : {
contentBase: path.resolve(__dirname),
compress: true,
historyApiFallback: true,
hot: true,
inline: true,
host: 'localhost',
port: 8080
};另外，在plugin中加入new webpack.HotModuleReplacementPlugin()，开启Hot Module Replacemen，即可实现热更新。
生成html配置
约定同一页面的js文件与模板文件命名一致，最终根据该js生成与其同名的html文件。
var htmlPages = (function() {
var artDir = path.resolve(__dirname, 'src/views');
var artFiles = glob.sync(artDir + '/*.art');
var array = [];
artFiles.forEach(function(filePath) {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
array.push(new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/template/index.html'),
filename: filename + '.html',
chunks: ['vendor', 'main', filename],
chunksSortMode: function(chunk1, chunk2) {
var order = ['vendor', 'main', filename];
var order1 = order.indexOf(chunk1.names[0]);
var order2 = order.indexOf(chunk2.names[0]);
return order1 - order2;
},
minify: {
removeComments: env === 'production' ? true : false,
collapseWhitespace: env === 'production' ? true : false
}
}));
});
return array;
})();通用模块提取为组件
对于一些在多个页面中都需要用到的模块，可将其提取出来作为通用的组件。组件的构成与页面一样，一个.js文件和一个.art文件以及一个.css文件，在js文件中渲染html内容，最后export，使用时直接require即可。具体实践可参考demo
存在问题
每新建一个页面就需要重新启动webpack服务
字体文件无法压缩，对于压缩通过font-face引入的网络字体，目前没有找到较好的解决方案
demo
基于本文理论的一个demo，地址：webpack-multipage-demo
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在Vue中如何实现数字输入框组件
使用jquery如何实现侧边栏左右伸缩效果
在JS函数中有关setTimeout详细介绍
在mongoose中有关于更新对象的详细介绍
在JavaScript中如何实现AOP

求一款web前端框架，开发react，要同时支持spa单页和ssr服务器渲染，支持typescript，最好带有完整的Demo

react-coat

react-coat 特点

• 集成 react、redux、react-router、history 等相关框架 我爱编程网

• 仅为以上框架的糖衣外套，不改变其基本概念，无强侵入与破坏性

• 结构化前端工程、业务模块化，支持按需加载

• 同时支持 SPA(单页应用)和 SSR(服务器渲染)

• 使用 typescript 严格类型，更好的静态检查与智能提示

• 开源微框架，源码不到千行，几乎不用学习即可上手

这款可以满足你，带完整Demo示例

javascript中的demo是什么意思

在 JavaScript 前端开发中，demo 通常指的是演示文稿、演示程序或演示示例。在 JavaScript 中，demo 可以用来演示一个特定的功能或代码库的使用方式。例如，如果一个开发者创建了一个新的 JavaScript 库，他们可以创建一个 demo 演示来展示该库如何使用，以及该库的效果。

通常 demo 本身是一个可在浏览器中运行的 HTML 页面，内容可以包括实际的代码示例、演示动画和其他与代码库相关的信息。在前端开发中，demo 经常与代码库一起提供，以使其他开发者可以轻松了解其功能、接口和使用方式。

以上就是我爱编程网小编为大家带来的内容了，希望能够帮助到大家，了解更多前端开发资讯敬请关注我爱编程网。