webpack多页面配置（webpack多进程）

简介:

Webpack是一个现代化的静态模块打包工具，可支持多页面配置，本文将介绍如何配置Webpack实现多页面打包。

多级标题:

1. 安装Webpack

2. 配置多页面入口

3. 配置多页面输出

4. 添加多页面HtmlWebpackPlugin

5. 配置多页面loader

内容详细说明:

1. 安装Webpack

首先，确保已经安装了Node.js和npm，然后通过npm安装Webpack：

```bash

npm install webpack webpack-cli --save-dev

```

2. 配置多页面入口

在Webpack配置文件中，可以通过指定entry来配置多页面入口，例如：

```javascript

module.exports = {

entry: {

page1: './src/page1.js',

page2: './src/page2.js'

}

};

```

3. 配置多页面输出

同样在Webpack配置文件中，可以通过指定output来配置多页面输出，例如：

```javascript

module.exports = {

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist')

}

};

```

4. 添加多页面HtmlWebpackPlugin

为了自动生成多页面的HTML文件，可以使用HtmlWebpackPlugin插件，例如：

```bash

npm install html-webpack-plugin --save-dev

```

然后在Webpack配置文件中添加插件配置：

```javascript

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

plugins: [

new HtmlWebpackPlugin({

title: 'Page 1',

template: 'src/page1.html',

filename: 'page1.html',

chunks: ['page1']

}),

new HtmlWebpackPlugin({

title: 'Page 2',

template: 'src/page2.html',

filename: 'page2.html',

chunks: ['page2']

})

]

};

```

5. 配置多页面loader

对于不同的页面可能需要不同的loader，可以在Webpack配置文件中根据需要进行配置，例如：

```javascript

module.exports = {

module: {

rules: [

{

test: /\.css$/,

use: [

'style-loader',

'css-loader'

]

},

{

test: /\.js$/,

exclude: /node_modules/,

use: 'babel-loader'

}

]

}

};

```

通过以上配置，Webpack可以轻松实现多页面打包，更好地管理项目文件结构，提升开发效率。