webpack配置多页面入口
时间: 2023-09-08 18:16:54 浏览: 74
在 webpack 配置中实现多页面入口可以使用 `entry` 属性来定义多个入口文件。下面是一个示例配置:
```javascript
// webpack.config.js
const path = require('path');
module.exports = {
entry: {
page1: './src/pages/page1/main.js',
page2: './src/pages/page2/main.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
// 其他配置项...
};
```
上述配置中,我们通过 `entry` 属性定义了两个入口文件 `page1` 和 `page2`,分别指向对应的入口文件路径。使用 `[name].js` 的输出文件名模板,使得每个入口文件对应生成一个对应的输出文件。
在每个入口文件中,你可以编写对应页面的逻辑和引入需要的资源。例如,`src/pages/page1/main.js` 可以这样编写:
```javascript
// src/pages/page1/main.js
import './styles/page1.css';
// 页面逻辑...
```
这样配置后,运行 `webpack` 命令打包构建时,会根据每个入口文件生成对应的输出文件到指定的输出路径(本例中为 `dist` 文件夹)。
注意,该配置仅是一个示例,实际项目中可能需要根据项目结构和需求进行相应的调整。另外,还可以使用插件如 HtmlWebpackPlugin 来生成多个 HTML 文件,并自动引入对应的 JS 文件。
相关推荐
![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_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)
![](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)