webpakc 双页面 webpack 配置-JavaScript中文网-JavaScript教程资源分享门户

前言

webpack 是一个现代化的前端打包工具，其强大的功能、灵活的配置以及丰富的插件使得它成为了前端开发中不可缺少的一部分。在实际开发中，我们经常需要构建多个页面的应用，其中某些页面的特征可能会有所不同。因此，在这种情况下，我们需要使用 webpack 进行双页面配置。

双页面配置

创建文件夹

首先，在你的项目根目录下创建以下文件夹：

src/
  common/
    js/
      index.js
    css/
      index.css
  page1/
    index.html
    index.js
    index.css
  page2/
    index.html
    index.js
    index.css

common 文件夹是用于存放公共资源的，包括共用的 js 和 css 文件。page1 和 page2 文件夹用于存放不同页面的相关文件。

配置 webpack

在项目根目录下创建一个 webpack.config.js 配置文件：

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

module.exports = {
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Page 1',
      template: './src/page1/index.html',
      filename: 'page1.html',
      chunks: ['page1', 'common']
    }),
    new HtmlWebpackPlugin({
      title: 'Page 2',
      template: './src/page2/index.html',
      filename: 'page2.html',
      chunks: ['page2', 'common']
    })
  ]
}

这里的配置使用了 HtmlWebpackPlugin 来生成页面的 HTML 文件，并将对应的 js 文件和公共资源引入到 HTML 文件中。我们在 entry 中定义了两个入口文件，分别对应了 page1 和 page2 文件夹下的 index.js 文件。然后在 output 中定义了输出的文件名和路径。最后，我们使用了两个 HtmlWebpackPlugin 来生成两个页面的 HTML 文件，并将对应的 js 文件和公共资源引入到 HTML 文件中。

安装依赖

我们还需要安装 webpack 和 HtmlWebpackPlugin 这两个依赖：

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

配置公共资源

在 common 文件夹下新建一个 index.js 文件，用于存放公共的 js 代码：

console.log('This is common js.')

在 common 文件夹下新建一个 index.css 文件，用于存放公共的 css 代码：

body {
  background-color: #f7f7f7;
}

配置页面

我们在 page1 文件夹下新建一个 index.html 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Page 1</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <h1>This is page 1.</h1>
  <script src="./index.js"></script>
</body>
</html>

在 page1 文件夹下新建一个 index.js 文件：

import '../common/js/index'

console.log('This is page 1 js.')

在 page1 文件夹下新建一个 index.css 文件：

h1 {
  color: red;
}

我们同样需要在 page2 文件夹下按照上面的方法进行配置。

运行构建命令

我们在 package.json 中添加以下命令：

{
  "scripts": {
    "build": "webpack"
  }
}

然后在终端中运行 npm run build 命令进行构建。

查看结果

构建完成之后，我们可以在 dist 文件夹下看到生成的文件：

dist/
  page1.html
  page1.bundle.js
  page2.html
  page2.bundle.js

我们可以使用浏览器打开 page1.html 和 page2.html 文件来查看两个页面的效果。在两个页面的 HTML 文件中，我们可以看到样式和脚本的引入方式与正常的单入口页面相同。

总结

本篇文章介绍了如何在 webpack 中进行双页面配置。在实际开发中，我们经常需要构建多个页面的应用，因此了解如何进行双页面配置是非常有用的。具体的实现方法我们已经在本文中讲解了，希望对读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a0aefeadd4f0e0ff8ecfd9

webpakc 双页面 webpack 配置

前言