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

最新推荐文章于 2024-09-23 11:10:13 发布

Lkkkkkkg

最新推荐文章于 2024-09-23 11:10:13 发布

阅读量507

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq593249106/article/details/84934283

版权

webpack 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

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

先前单页面目录结构:

|- /dist
  |- /css
     |- main.css //分离出来的css文件
  |- bundle.js //入口文件
  |- index.html
|- /node_modules
|- /node_modules
|- /src //用于放源文件的文件夹
  |- /components
  |- /index //模板文件
    |- index.html //模板文件
    |- index.js //入口文件
    |- App.js //react主文件
|- package.json
|- webpack.config.js //webpack配置文件

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

|- /dist
  |- /css
     |- main.css //分离出来的css文件
  |- bundle.js //入口文件
  |- index.html
|- /node_modules
|- /src //用于放源文件的文件夹
  |- components //存放页面的目录
    |- index //主页
      |- App.js
      |- index.html 
      |- index.js
      |- index.scss
    |- otherA //另一个页面A
      |- App.js
      |- otherA.html 
      |- otherA.js
      |- otherA.scss
    |- otherB //另一个页面B
      |- App.js
      |- otherB.html 
      |- otherB.js
      |- otherB.scss
|- package.json
|- webpack.config.js //webpack配置文件

每个页面添加了一个 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

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var devMode = false; //标志是否开发模式
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
    mode: 'development',
    entry: { //入口文件
        index: "./src/components/index/index.js",
        otherA: "./src/components/otherA/otherA.js",
        otherB: "./src/components/otherB/otherB.js",
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].js', //根据入口文件分为不同出口文件
    },
    devtool: 'inline-source-map', // 不同选项适用于不同环境
    devServer: {
        contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
        port: 8080 //端口号设为8080, 默认也是8080
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                exclude: /node_modules|packages/, //路径
                test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: 'babel-loader', //使用的加载器名称
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
        ]
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new CleanWebpackPlugin(['dist']), //设置清除的目录
        new HtmlWebpackPlugin({
            template: "./src/components/index/index.html", //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            chunks: ['index'], //指定入口文件
            filename: "index.html" //指定模板文件的位置
        }),
        new HtmlWebpackPlugin({
            template: "./src/components/otherA/otherA.html",
            chunks: ['otherA'],
            filename: "otherA.html"
        }),
        new HtmlWebpackPlugin({
            template: "./src/components/otherB/otherB.html",
            chunks: ['otherB'],
            filename: "otherB.html"
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', //类似出口文件
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
            cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项，默认为{}
            canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
        })
    ]
};

打包

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

|- /dist
  |- /css //分离出来的css文件
     |- index.css 
     |- otherA.css 
     |- otherB.css 
  |- /js
     |- index.js
     |- otherA.js
     |- otherB.js
  |- index.html
  |- otherA.html
  |- otherB.html
|- /node_modules
|- /src //用于放源文件的文件夹
  |- components //存放页面的目录
    |- index //主页
      |- App.js
      |- index.html 
      |- index.js
      |- index.scss
    |- otherA //另一个页面A
      |- App.js
      |- otherA.html 
      |- otherA.js
      |- otherA.scss
    |- otherB //另一个页面B
      |- App.js
      |- otherB.html 
      |- otherB.js
      |- otherB.scss
|- package.json
|- webpack.config.js //webpack配置文件