下面我将详细讲解webpack编译多页面vue项目的配置问题的完整攻略。
在实际项目中,我们可能需要使用vue框架来开发多个独立的页面,这时我们需要使用webpack来对这些页面进行打包编译。在vue-cli的默认配置中,webpack只会编译单页面应用,在多页面应用中需要对webpack进行一些配置才能实现编译多个页面。
在webpack的配置文件中,需设置entry,entry是webpack打包的入口文件,我们需要根据多页面应用来设置多个entry。
例如下面是一个包含两个页面的webpack配置:
module.exports = {
entry: {
page1: './src/page1/main.js',
page2: './src/page2/main.js'
}
// 其他配置
}
设置entry后,我们需要设置output,output是webpack打包后的输出文件的配置。
module.exports = {
entry: {
// 设置entry
},
output: {
// 设置输出目录
path: path.resolve(__dirname, 'dist'),
// 设置输出文件名
filename: '[name].js'
}
// 其他配置
}
我们可以使用占位符[name]来表示每个entry中对应的属性名。
在单页面应用中,我们使用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