webpack 3.X學習之多頁面打包

時間 2019-11-25

原文原文鏈接

做者網站原文：http://hawkzz.com/blog/blog/1514542087911html

簡介

咱們開發不可能只寫一個頁面，每次都要寫不少頁面，這時爲了開發效率，咱們使用前端自動化工具webpack，那麼webpack是如何打包頁面的呢？又是如何打包多頁面的呢？前端

單頁面打包

咱們知道要打包單頁面的方法，很簡單，配置入口，和html插件，webpack

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

const config = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path: path.join(__dirname, 'dist'),
        filename: 'js/index.js'
    }
    ...
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            hash: true,
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        })
    ]
}

上面的配置就是打包一個單頁面的代碼，具體配置項的意思請參考HTMLWebpackPlugin;程序員

如何打包多頁面

在學了webpack以後，個人感覺是我會配置webpack了，也能運行了，可是學習的過程當中都是單頁面的，那麼多頁是如何打包的呢？其實多頁面的打包和單頁面的打包的原理是同樣的，只是多配置幾個對應的入口，和出口，以及HtmlWebpackPlugin對象；固然你徹底能夠像下面這樣：web

const config = {
    entry:{
        index:'./src/index.js'，
        info:'./src/index.js'
    },
    output:{
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].js'
    }
    ...
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            chunks:['index'],
            hash: true,
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'info.html',
            template: './src/info.html',
            hash: true,
            chunks:['info'],
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        })
    ]
}

細心的你確定發現我改變了幾個地方，一是,把output.filename的‘js/index.js’變成了‘js/[name].js’,這是由於咱們是多頁面，每一個頁面對應相應的js這樣方便管理，二是，在HtmlWebpackPlugin對象中添加了chunks這個屬性，chunk屬性是讓你選擇對應的js模塊；函數

上面這種寫法固然是沒有問題，這是隻有兩個頁面無所謂，那麼有十個甚至更多呢，咱們一直作着重複的事，這不是咱們程序員的風格，咱們就是爲了可以偷懶才作程序員的不是嗎?(固然還有高工資(#^.^#))，接下來咱們來抽離這些重複的事；工具

首先，咱們經過Node的glob對象，來獲取咱們存在的html或js；學習

/**
*
* @param {string}  globPath  文件的路徑
* @returns entries
*/
function getView(globPath,flag){
    let files = glob.sync(globPath);

    let entries = {},
    entry, dirname, basename, pathname, extname;

    files.forEach(item => {
        entry = item;
        dirname = path.dirname(entry);//當前目錄
        extname = path.extname(entry);//後綴
        basename = path.basename(entry, extname);//文件名
        pathname = path.join(dirname, basename);//文件路徑
        if (extname === '.html') {
            entries[pathname] = './' + entry;
        } else if (extname === '.js') {
            entries[basename] = entry;
        }
    });

    return entries;
}

既然，咱們已經有了getView()函數，能夠獲取html和js文件，那麼咱們就能夠肯定有多少個入口，和多少個頁面;網站

let entriesObj = getView('./src/js/*.js');

let config = {
    entry:entriesObj,
    ...
}

上面咱們就配置好了入口，不須要咱們手動添加了，有多少js就有多少入口；ui

let pages = Object.keys(getView('./src/*html'));

pages.forEach(pathname => {
    let htmlname = pathname.split('src\\')[1];
    let conf = {
        filename: `${htmlname}.html`,
        template: `${pathname}.html`,
        hash: true,
        chunks:[htmlname],
        minify: {
            removeAttributeQuotes:true,
            removeComments: true,
            collapseWhitespace: true,
            removeScriptTypeAttributes:true,
            removeStyleLinkTypeAttributes:true
        }
    }

    config.plugins.push(new HtmlWebpackPlugin(conf));
});

最後，咱們獲取HTML頁面，和添加對應頁面的HTMLWebpackPlugin對象；