webpack学习（十一）：构建多页面应用

水深无声 2022-04-06 18:59 198阅读 0赞

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]  
继上一次配置完压缩分离css : [https://blog.csdn.net/qq593249106/article/details/84933978][https_blog.csdn.net_qq593249106_article_details_84933978]

先前单页面目录结构:

添加两个页面, 修改成如下多页面结构:

每个页面添加了一个 App.js :

## index页面 ##

**App.js**

import React from ‘react’

const App = () => (

#    Index       #

)

export default App

**index.html**
    
    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
    </head>
    <body>
    <div id="root"></div>
    </body>
    </html>

**index.js**

import React from 'react'
    import {  render } from 'react-dom'
    import App from './App'
    import './index.scss'
    
    render(<App />, document.getElementById("root"))

**index.scss**

$color: green; body { 
      background-color: $color;
    }

## otherA页面 ##

**App.js**

import React from 'react'
    
    const App = () => (
        <h1>
        otherA<br />
        </h1>
    )
    
    export default App

**otherA.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>otherA</title>
    </head>
    <body>
    <div id="root">
    </div>
    </body>
    </html>

**otherA.js**

import React from 'react'
    import {  render } from 'react-dom'
    import App from './App'
    import './otherA.scss'
    
    render(<App />, document.getElementById("root"))

**otherA.scss**

$color: red; body { 
      background-color: $color;
    }

## otherB页面 ##

**App.js**

import React from 'react'
    
    const App = () => (
        <h1>
           otherB<br />
        </h1>
    )
    
    export default App

**otherB.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>otherB</title>
    </head>
    <body>
    <div id="root">
    </div>
    </body>
    </html>

**otherB.js**

import React from 'react'
    import {  render } from 'react-dom'
    import App from './App'
    import './otherB.scss'
    
    render(<App />, document.getElementById("root"))

**otherB.scss**

$color: yellow; body { 
      background-color: $color;
    }

## 配置 webpack.config.js ##

增加入口文件, 同时修改出口文件, 然后配置出口文件添加一个 js 目录专门用来存放 js 文件, css 同理, 在 plugins 里的 MiniCssExtractPlugin 插件里配置, 因为是多个页面, 还需要添加 HtmlWebpackPlugin , 设置各个页面的参数:  
**webpack.config.js**

## 打包 ##

终端输入 npm run build, 可以看到目录结构的变化:

分别打开 index.html, otherA.html, otherB.html, 各自页面设置的 scss 都生效了, 构建成功:  
在这里插入图片描述  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84933978]: https://blog.csdn.net/qq593249106/article/details/84933978
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/a3f75756cd474435abcfe40a827b71b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]: /images/20220406/f82973e44f2a4461bf3ff4dcd5b8ad2f.png