详解webpack编译多页面vue项目的配置问题

下面我将详细讲解webpack编译多页面vue项目的配置问题的完整攻略。

背景介绍

在实际项目中，我们可能需要使用vue框架来开发多个独立的页面，这时我们需要使用webpack来对这些页面进行打包编译。在vue-cli的默认配置中，webpack只会编译单页面应用，在多页面应用中需要对webpack进行一些配置才能实现编译多个页面。

配置方式

设置entry

在webpack的配置文件中，需设置entry，entry是webpack打包的入口文件，我们需要根据多页面应用来设置多个entry。

例如下面是一个包含两个页面的webpack配置：

module.exports = {
  entry: {
    page1: './src/page1/main.js',
    page2: './src/page2/main.js'
  }
  // 其他配置
}

设置output

设置entry后，我们需要设置output，output是webpack打包后的输出文件的配置。

module.exports = {
  entry: {
    // 设置entry
  },
  output: {
    // 设置输出目录
    path: path.resolve(__dirname, 'dist'),
    // 设置输出文件名
    filename: '[name].js'
  }
  // 其他配置
}

我们可以使用占位符[name]来表示每个entry中对应的属性名。

配置HtmlWebpackPlugin

在单页面应用中，我们使用html-webpack-plugin来自动生成index.html文件，在多页面应用中，我们也需要为每个页面生成对应的html文件。

在webpack配置文件的plugins中添加多个HtmlWebpackPlugin实例，配置不同的模板和输出文件名：

module.exports = {
  entry: {
    // 设置entry
  },
  output: {
    // 设置输出目录
    path: path.resolve(__dirname, 'dist'),
    // 设置输出文件名
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 设置模板
      template: './src/page1/index.html',
      // 设置输出文件名
      filename: 'page1.html',
      // 设置chunk
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      // 设置模板
      template: './src/page2/index.html',
      // 设置输出文件名
      filename: 'page2.html',
      // 设置chunk
      chunks: ['page2']
    })
  ]
  // 其他配置
}

额外的配置

如果我们在多个页面中使用了相同的第三方库，我们可以使用CommonsChunkPlugin来将这些公共模块打包成一个文件，以便在每个页面中复用。示例如下：

module.exports = {
  entry: {
    // 设置entry
  },
  output: {
    // 设置输出目录
    path: path.resolve(__dirname, 'dist'),
    // 设置输出文件名
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 配置html文件
    }),
    new webpack.optimize.CommonsChunkPlugin({
      // 设置公共chunk名称
      name: 'common'
    })
  ]
  // 其他配置
}

示例说明

示例一

假设我们有一个多页面应用，其中包含两个页面：page1和page2，这两个页面中都使用了jQuery框架。我们可以按照上述配置方式，设置entry、output、HtmlWebpackPlugin和CommonsChunkPlugin，代码如下：

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    page1: './src/page1/main.js',
    page2: './src/page2/main.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/page1/index.html',
      filename: 'page1.html',
      chunks: ['page1', 'common']
    }),
    new HtmlWebpackPlugin({
      template: './src/page2/index.html',
      filename: 'page2.html',
      chunks: ['page2', 'common']
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common'
    })
  ]
}

示例二

假设我们有一个多页面应用，其中包含三个页面：page1、page2和page3，这三个页面分别对应不同的业务场景，页面之间没有公共模块。我们可以按照上述方式配置entry和output，但不需要使用CommonsChunkPlugin，只需要使用html-webpack-plugin来生成不同的html文件，代码如下：

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    page1: './src/page1/main.js',
    page2: './src/page2/main.js',
    page3: './src/page3/main.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/page1/index.html',
      filename: 'page1.html',
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      template: './src/page2/index.html',
      filename: 'page2.html',
      chunks: ['page2']
    }),
    new HtmlWebpackPlugin({
      template: './src/page3/index.html',
      filename: 'page3.html',
      chunks: ['page3']
    })
  ]
}

以上就是webpack编译多页面vue项目的配置问题的完整攻略以及两个示例说明，希望能对你有所帮助。