javascript - webpack关于HTML打包问题

问题描述

问 题

var html_plugins = function(){
    var entryHtml = glob.sync(srcDir+'/*.html');
    var htmlPlugins = [];
    var jsHash = entries();

    entryHtml.forEach(function(filePath,i){
        var filename = filePath.match(/\/(\w+?)\.\w+$/)[1];
        var conf = {
            template: 'html!' + filePath,
            filename: filename + '.html'
        }
        if(jsHash[filename]){
            conf.inject = 'body';
            conf.chunck = ['vendor',filename]
        }

        htmlPlugins.push(new HtmlWebpackPlugin(conf))
    })
    return htmlPlugins;
}
plugins.concat(html_plugins());

HTML组件配置代码

{
    entry: Object.assign(entries(),{
        'vendor':['jquery']
    }), //入口js，可为数组
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].js",
        chunkFilename: '[chunkhash:8].chunk.js',
        publicPath: "/"
    },
    module: {
        loaders: [
            {
                test :  /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
                loaders:[
                    // 小于10KB的图片会自动转成dataUrl
                    'url?limit=10240&name=img/[hash:8].[name].[ext]',
                    'image?{bypassOnDebug:true, progressive:true,optimizationLevel:3,pngquant:{quality:"65-80",speed:4}}'
                ]
            },
            {
                test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/,
                loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'
            },
            {test: /\.(tpl|ejs)$/, loader: 'ejs'},
            {test: /\.css$/, loader: cssLoader},
            { test: /\.scss$/, loader: sassLoader}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.css', '.scss', '.tpl', '.png', '.jpg'],
        root: [srcDir, nodeModPath],
        alias: pathMap,
        publicPath: '/'
    },
    plugins:plugins
}

这是exports
想问下。我这样写，为什么只有HTML文件为什么打包打不过去呢？

解决方案

问题出在plugins.concat(html_plugins())这里;并没有改变原plugins，导致最后组件未加载，谢谢楼上几位的回答。

这篇关于javascript - webpack关于HTML打包问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！