vue多页面应用如何针对其中的某个页面进行单独打包
时间: 2024-02-03 16:14:02 浏览: 34
Vue多页面应用可以通过webpack的entry配置来实现针对某个页面进行单独打包的功能。
1. 在webpack的entry配置中,为需要单独打包的页面设置一个入口文件,例如:
```
module.exports = {
entry: {
index: './src/pages/index/main.js',
about: './src/pages/about/main.js'
},
// ...
}
```
2. 在webpack的output配置中,设置打包后的输出文件名,例如:
```
module.exports = {
entry: {
index: './src/pages/index/main.js',
about: './src/pages/about/main.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].js'
},
// ...
}
```
其中`[name]`会被替换成entry中的键名,即页面名称。
3. 在webpack的plugins配置中,使用`HtmlWebpackPlugin`插件生成HTML文件,并指定对应的入口文件,例如:
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/pages/index/main.js',
about: './src/pages/about/main.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index/index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: './src/pages/about/about.html',
chunks: ['about']
})
],
// ...
}
```
其中`chunks`选项指定需要引入的打包后的js文件,即entry中的键名。
通过以上配置,webpack会针对每个页面生成单独的打包文件,可以实现针对某个页面进行单独打包的功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)