webpack配置多页应用-1

大致思路：多页应用就是多个页面分别引入资源（js、css）等

文件结构

|-- project

|-- src

|-- html

|-- pageA.html

|-- pageB.html

|-- js

|-- index.js

|-- pageB.js

|-- pageA.js

|-- webpack.config.js

一、生成页面绑定js

在使用webpack打包单页应用时很简单编译后自动生成index.js单个入口文件然后我们将其引入到html中即可，我们可以自己在dist里手动写然后引入编译后的js等，不过这就显得即low又麻烦。这时就可以用到html-webpack-plugin插件自动生成 HTML 文件并将对应的js引入到html中，简单用法如下

new HTMLWebpackPlugin({
        filename: 'pageA.html',//生成的 HTML 文件名，我这里选择和原始文件名保持一致
        template: '../src/html/pageA.html',//生成 HTML 文件使用的模板，也就是我们之前在 html 文件夹中建立的那些文件
        chunks: [pageA, 'vendor'],//生成 HTML 文件时会自动插入相应的代码片段（也就是 JavaScript 文件）值为output 选项中的 [name]的值 其中vendor为公共模块
    })output 选项中的 [name]的值 其中vendor为公共模块
    })

二、编译多页面对应的js

webpack入口文件配置项entry: string|Array<string> 为字符串时表示单个入口；就是多个文件合并成一个传入数据时将创建“多个主入口(multi-main entry)”，多个依赖文件一起注入 就是多个文件合并成一个，显然不符合我们要的多页面各自对应的js,entry另外提供了对象的语法entry: {[entryChunkName: string]: string|Array<string>}多个文件生成多个chuank

entry: {
    pageA: "./src/js/pageA", //生成pageA.bundle.js
    pageB: "./src/js/pageB" //生成pageA.bundle.js

},

output: { path: path.join(__dirname, "../dist"), filename: "[name].bundle.js"},

三、将js和页面对应起来

我们可以使用一中的html-webpack-plugin插件将多个页面引入对应的js文件；一个html-webpack-plugin生成一个页面，所以我们再次多次使用html-webpack-plugin

plugins:[new HTMLWebpackPlugin({
        filename: 'pageA.html',
        template: '../app/html/pageA.html',
        chunks: [pageA, 'vendor'],
    }),

new HTMLWebpackPlugin({
        filename: 'pageA.html',
        template: '../app/html/pageB.html',
        chunks: [pageB, 'vendor'],
    })

]

现在我们已经基本完成了配置多页应用，不过在这里有个问题那就是当页面页面越来越多时，每次都要去entry和plugins里添加岂不是很麻烦

四、自动检索需页面

1、上面的问题我们可以通过把页面放到一个配置文件里然后遍历配置文件循环添加进entry和html-webpack-plugin中（每次新增页面时都需要在配置文件里新增数据）

2、通过glob很容易遍历出src/html目录下的所有html文件

npm install glob --save-dev

const path = require("path");
const srcDir = path.resolve(process.cwd(), 'src');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入glob
const glob = require('glob')
const entries= function () {
    var htmlDir = path.resolve(srcDir, 'html')
    var htmlFiles = glob.sync(htmlDir + '/*.html')
    var jsDir = path.resolve(srcDir, 'js') //js文件夹
    var map = {};
    for (var i = 0; i < htmlFiles.length; i++) {
     var filePath = htmlFiles[i];
     var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
     var jsPath=`${jsPath}/${filename}.js`; //匹配js文件夹里对应html名的js作为入口
     map[filename] = jsPath;
    }
    return map;
   }
const HTMLPlugins= function () {
    var htmlDir = path.resolve(srcDir, 'html')
    var htmlFiles = glob.sync(htmlDir + '/*.html')
    var map = [];
    for (var i = 0; i < htmlFiles.length; i++) {
        var filePath = htmlFiles[i];
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        const htmlPlugin = new HtmlWebpackPlugin({
            filename: `${filename}.html`,
            template: filePath,
            chunks: [filename,'vendor'],
        });
     map.push(htmlPlugin);
    }
    return map;
   }

 

大功告成

 

至于vender.bundle.js是公共库，这个我们下节再讲webpack配置多页应用-2

源码地址点击下载