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，即可实现热更新。