webpack 多页面打包配置(23)

获取全套webpack 4.x教程，请访问瓦力博客

之前的配置是单页面应用，就是只有一个html文件。多页面应用就是多个html文件。实现多页面webpack配置基本思路就是采用多个入口配置，然后配置多个html-webpack-plugin来生成多个html文件。我们在之前的项目中新增一个登陆页面和退出页面(这里只是为了演示，大家根据实际实际情况自己配置)

1.文件结构

myProject
|-build
   |-base
       |-path.js
       |-config.js
+      |-html.js       
   |-mode.js
   |-entry.js
   |-devtool.js
   |-module.js
   |-plugins.js
   |-devServer.js
   |-optimization.js
   |-output.js
   |-resolve.js
 |-dist
 |-node_modules
 |-src
+   |-page
+       |-login
+            |-login.html
+            |-login.js
+       |-logout
+            |-logout.html
+            |-logout.js
    |-api
        |-apiPath.js
    |-util
        |-math.js
    |-assets
        |-css
            |-index.css
        |-less
            |-index.less     
        |-sass
            |-index.scss
        |-images
            |-wali_logo.png
    |-index.html
    |-index.js
+   |-favicon.ico  
 |-package.json
 |-webpack.config.js
 |-webpack.dll.js
 |-postcss.config.js
 |-.babelrc
 |-.eslintignore
 |-.eslintrc.js
 |-package-lock.json
 |-stats.json

2.webpack配置

src/page/login/login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>这是一个登陆页面</h1>
</body>
</html>

src/page/login/login.js

console.log('这是一个登陆页面');

src/page/logout/logout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>这是一个退出页面</h1>
</body>
</html>

src/page/logout/logout.js

console.log('这是一个退出页面');

build/base/html.js

const dirPath = require('./path');
const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');    //生成html文件

const getFiles = dir =>{   //遍历page下文件
    let results = [];
    let list = fs.readdirSync(dir);
    list.forEach(file=>{
        file = dir + '/' + file;
        let stat = fs.statSync(file);
        if(stat && stat.isDirectory()) results = results.concat(getFiles(file));
        else results.push(file);
    })
    return results;
}

let entry = {
    main: dirPath.src + '/index.js'
};
let plugins = [];
let files = getFiles(path.resolve(dirPath.src,'page'));

files.forEach(val=>{
    let name = val.replace(/(.*\/)*([^.]+).*/ig,"$2");
    if(/\.js$/.test(val)){            
        entry[name] = val;
    }
    if(/\.html$/.test(val)){
        let output = val.replace(/(.*\\)(.*\/)*([^.]+).*/ig,"$2");
        let file = val.replace(/(.*\/)*(.+).*/ig,"$2");
        let htmlConfig = {
            favicon: dirPath.src+'/favicon.ico',
            filename: output + file,   //热替换时如果有[hash]则会找不到页面
            template: val,
            inject:'body',      
            chunks:[`runtimechunk~${name}`,'vendors',name],    //只允许加载当前的chunk
            chunksSortMode:'auto',  //加载chunk的顺序
            excludeChunks:[], //排除某个 chunk
        }
        plugins.push(new HtmlWebpackPlugin(htmlConfig));
    }
})

plugins.unshift(new HtmlWebpackPlugin({
    favicon: dirPath.src+'/favicon.ico',
    filename:'index.html',   
    template: dirPath.src + '/index.html',
    inject:'body',    //插入的位置 ['head','body']
    chunks:['runtimechunk~main','vendors','vue','main'],    //只允许加载当前的chunk
    chunksSortMode:'auto',  //加载chunk的顺序
    excludeChunks:[]     , //排除某个 chunk
}))

module.exports = {
    entry: entry,
    plugins: plugins
}

修改build/entry.js

- const dirPath = require('./base/path');
+ const html = require('./base/html');

- let entry = {
-  main: dirPath.src + '/index.js'
-}

+ let entry = html.entry

module.exports = entry;

修改build/plugin.js

const dirpath = require('./base/path');
const config = require('./base/config');
+ const html = require('./base/html');

const webpack = require('webpack');
- const HtmlWebpackPlugin = require('html-webpack-plugin');    //生成html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  //清除
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  //css样式提取
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
+ const fs = require('fs');



let plugins = [
-   new HtmlWebpackPlugin({
-       title: '瓦力博客',
-       template: dirpath.src + '/index.html'   //以src/index.html为编译模板
-   }),
    new  MiniCssExtractPlugin({
        filename: config.NODE_ENV == 'development'?'[name.css]': `${dirpath.css}/[name].[hash].css`,
        chunkFilename: config.NODE_ENV == 'development'?'[id].css': `${dirpath.css}/[id].[hash].css`
    }),   //css提取
    new webpack.ProvidePlugin({
        _:'loadsh',
        url: ['../src/api/apipath', 'url']
    }),
    new webpack.DefinePlugin({ 
        IS_PRODUCTION: config.NODE_ENV == 'development'?JSON.stringify(false):JSON.stringify(true),
    }),
    new CleanWebpackPlugin()
]

+ plugins = html.plugins.concat(plugins);

let files = fs.readdirSync(dirpath.dll);
files.forEach(val=>{
    if(/\.js$/.test(val)){
        plugins.push(new AddAssetHtmlPlugin({ 
            filepath: `${dirpath.dll}/${val}`
        }))     
    }

    if(/\.json$/.test(val)){
        plugins.push(new webpack.DllReferencePlugin({
            manifest: `${dirpath.dll}/${val}`
        }))
    }
})


if('development' == config.NODE_ENV){
    plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = plugins;

运行build

yarn run build
ssl

可以看到cli有三个入口文件，检查dist是不是生成三个html文件

dist
|-index.html
|-page
  |-login
    |-login.html
  |-logout
    |-logout.html

打开生成html，检查引入的文件是否正确

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
<link rel="shortcut icon" href="/favicon.ico"></head>
<body>
<h1>欢迎来到瓦力博客</h1>
<span class="iconfont wali-icon-fuzhi"></span>
<img src="assets/images/wali_logo2BQg9e7.png" alt="">
<script type="text/javascript" src="/vue.dll.js"></script><script type="text/javascript" src="/vendors.dll.js"></script><script type="text/javascript" src="/runtimechunk~main.js"></script><script type="text/javascript" src="/main.js"></script></body>
</html>

dist/page/login/login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link rel="shortcut icon" href="/favicon.ico"></head>
<body>
    <h1>这是一个登陆页面</h1>
<script type="text/javascript" src="/vue.dll.js"></script><script type="text/javascript" src="/vendors.dll.js"></script><script type="text/javascript" src="/runtimechunk~login.js"></script><script type="text/javascript" src="/login.js"></script></body>
</html>

dist/page/logout/logout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link rel="shortcut icon" href="/favicon.ico"></head>
<body>
    <h1>退出登录</h1>
<script type="text/javascript" src="/vue.dll.js"></script><script type="text/javascript" src="/vendors.dll.js"></script><script type="text/javascript" src="/runtimechunk~logout.js"></script><script type="text/javascript" src="/logout.js"></script></body>
</html>

可以看到对应的js文件都引入成功了，到此webpack常用的基本配置就算完成了。小菜会将代码上传到github上，供大家参考。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • webpack 2 打包实战
    写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,685评论 4赞 31
  • Gulp和Webpack的差异
    在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,837评论 1赞 32
  • Webpack 配置入门
    更新：Webpack4已经发布，本篇是基于Webpack3的，请注意。更正：1.package.json中使用了应...
    HermitCarb阅读 4,943评论 2赞 4
  • webpack详解
    webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 11,547评论 2赞 71
  • 11🈷️小结
    回顾上个月，觉得11月的工作坊给我带来的影响比较大，我的个案让我看到了内在的我被压抑的如此厉害，也让我看到了我原生...
    纯露阅读 3,375评论 2赞 3