How to implement multi-page development in webpack

This article mainly introduces the practice of webpack multi-page development. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor and take a look.

Written in front

webpack is a module loader and packaging tool that can convert js, css, pages, pictures, Various resources such as videos are modularized. Nowadays, there are many single-page webpack models circulating on the Internet, but what about multiple pages? Less so, now I offer a multi-page front-end model. Hope everyone can use it.

When I first came into contact with webpack, I thought webpack was only suitable for single-page applications, such as webpack react and webpack vue. I myself feel the power and convenience of webpack in the process of using webpack vue to build projects and develop. Based on actual project needs, I am wondering whether multi-page sites can also be built using webapck? So I started some exploration and finally built a relatively complete solution.

This article takes an actual project as an example to describe how to use webpack for engineering construction in multi-page projects. This article is a summary of my own practical experience, so some solutions are not optimal and are still being explored and optimized. If there are any errors or omissions, please point them out.

Introduction

This project is mainly built based on webpack2.x, with gulp as an auxiliary tool. The front end uses art-template as the template engine. One page corresponds to a template file and an entry file. Other modules can be introduced into the entry file through import or require. Webpack will automatically merge these modules into one file with the entry file.

Front-end development environment setup

Main directory structure

├─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 configuration

Entry file

// 获取入口文件
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;
})();

This method will generate a map from the file name to the absolute path of the file, such as

entry: {
  'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

Hot update

Hot update is simply not easy to use, greatly Improved development efficiency.

//服务器配置
var devServer = env === 'production' ? {} : {
  contentBase: path.resolve(__dirname),
  compress: true,
  historyApiFallback: true,
  hot: true,
  inline: true,
  host: 'localhost', 
  port: 8080
};

In addition, add new webpack.HotModuleReplacementPlugin() to the plugin and enable Hot Module Replacemen to achieve hot updates.

Generate html configuration

It is agreed that the js file on the same page has the same name as the template file, and finally an html file with the same name is generated based on the js.

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;
})();

Extract common modules into components

For some modules that need to be used in multiple pages, they can be extracted as common components. The composition of the component is the same as that of the page, a .js file, a .art file and a .css file. The html content is rendered in the js file and finally exported. You can directly require it when using it. For specific practices, please refer to demo

Existing problems

1. Every time a new page is created, the webpack service needs to be restarted

2. Font files cannot be compressed. There is currently no better solution for compressing web fonts introduced through font-face

demo

A demo based on the theory of this article, address: webpack-multipage-demo

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the number input box component in Vue

How to use jquery to achieve the left and right sidebar scaling effect

Detailed introduction to setTimeout in JS function

Detailed introduction to updating objects in mongoose

How to implement AOP in JavaScript

The above is the detailed content of How to implement multi-page development in webpack. For more information, please follow other related articles on the PHP Chinese website!