关键词

详解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项目的配置问题的完整攻略以及两个示例说明,希望能对你有所帮助。

本文链接:http://task.lmcjl.com/news/6995.html

展开阅读全文