webpack-dev-server - webpack-dev-middleware中用html-webpack-plugin 输出页面文件的问题

问题描述

问 题

我的环境是服务器是koa,视图引擎是koa-hbs
在webapck中使用html-webpack-plugin处理所有的hbs/html页面（将对应的js和scss处理后关联到的页面代码里<link href>,<script src>）
然后我把使用了webpack-dev-middleware插在koa上，实现热加载什么的，
但发现webpack-dev-middleware把我的hbs/html文件也搞到内存里了放在publicpath下了
可我的我的路由和视图引擎(koa-hbs)需要指定到某一文件目录，去解析这些hbs文件。。
我不知道怎么办，
可否让webpack-dev-middleware下的html-webpack-plugin 不输出到内存里，而输出成实体文件，？
或者可否让我的koa-hbs读取webpack-dev内存路径里的文件？

视图配置

let buildPath='dist';
// 配置视图引擎
app.use(hbs.middleware({
  defaultLayout: "layout",
  disableCache:true,
  extname:'.hbs',
  viewPath:__dirname+"/"+buildPath+'/views',
  layoutsPath:__dirname+"/"+buildPath+'/views/_layout',
  partialsPath:__dirname+"/"+buildPath+'/views/_layout'
}));

webpack-dev-middleware

    let webpack = require('webpack');
    let webpackConf = require('./webpack.config');
    webpackConf.devtool = 'sourcemap';
    webpackConf.debug = true;
    let compiler = webpack(webpackConf);

    app.use(require('koa-webpack-dev-middleware')(compiler,webpackConf.devServer));
    app.use(require("koa-webpack-hot-middleware")(compiler));

webapck.config

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var util = require('util');
let publicPath='/assets/';
let buildPath='dist';
let srcPath='src';

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
    name:'vendor',
    filename:'vendor.js'
    }
);
var cssPlugin = require('extract-text-webpack-plugin');
var htmlPlugin = require('html-webpack-plugin');
var config = {
    //页面入口文件配置
    entry:
     {
         vendor:['jquery','vue'],
         "js/myframe":[__dirname+'/'+srcPath+'/assets/js/myframe.js']
    },

    externals: {
        //   jquery: 'jquery',
        //   vue:'vue'
    },
    //入口文件输出配置
    output: {
        //path: path.resolve(buildPath),
        path: path.resolve(buildPath+publicPath),
        filename: '[name].js',
        publicPath: publicPath,
    },
    module: {
        //加载器配置
         loaders: [
            // {test:/\.html$/,loader:'handlebars-loader',
            //     query:{
            //     helperDirs: [
            //             __dirname + "/hbs_helper",
            //     ],
            //     partialDirs:[
            //         path.join(__dirname, 'src','views', '_layout')
            //             //__dirname+"/src/views/_layout"
            //     ]
            //     }
            // },
            { test:require.resolve('jquery'),loader:'expose?jQuery'},
            { test:require.resolve('vue'),loader:'expose?Vue'},            
            { test: /\.css$/, loader: cssPlugin.extract("style-loader", "css-loader?sourceMap") },
            { test: /\.scss$/, loader: cssPlugin.extract("style", "css!sass?sourceMap") },
            //     //{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
        ]
    },
    //其它解决方案配置
    resolve: {
        extensions: ['', '.js', '.json', '.scss','.hbs'],
    },
    plugins: [
        commonsPlugin,
        new cssPlugin('[name].css')
        
    ],
        devServer: {
        hot: true,
        noInfo: false,
        inline: true,
        publicPath: publicPath,
        stats: {
            cached: false,
            colors: true
        }
    }
};

//获得入口文件及html合并配置
var entrypack = ((entryPath)=> {
    var pack = {
        entires: {},
        HtmlWebpackPlugins:[]
 
    }
    function getjs(d) {
        fs.readdirSync(d).forEach(function (item) {
            let p = d + "/" + item;

            if (fs.statSync(p).isDirectory()) {
                getjs(p);
            } else {
                let isLayout = false;
                console.log(item)
                if(item=='layout.hbs') isLayout=true;
                let pathkey_ext = p.replace(entryPath+'/', '');
                let pathkey = pathkey_ext.replace(/\.\w+$/,'');

                if (/\.js$/.test(item)) {
                    pack.entires[pathkey] = __dirname + "/" + p;
                }else 
                if(/\.hbs$/.test(item)){
                    
                     pack.HtmlWebpackPlugins.push(new htmlPlugin
                        ({
                            //filename:'../views/'+ pathkey+".html" ,//这里增加目录后,输出将呈现在该目录下./aa/[name].html
                            filename:pathkey_ext,
                            template: p,
                            inject: true,
                            chunks: (!isLayout)?['vendor','js/myframe',pathkey]:[],
                            showErrors: true,
                            // minify: { //压缩HTML文件
                            //     removeComments: true, //移除HTML中的注释
                            //     collapseWhitespace: false //删除空白符与换行符
                            // },
                            hash:true,
                        })
                    )                   
                }
            }
        });

    }
    getjs(entryPath);
    return pack;
    
})(srcPath+"/views");

util._extend(config.entry, entrypack.entires);
 
config.plugins = config.plugins.concat(entrypack.HtmlWebpackPlugins);

module.exports = config;

解决方案

已变通解决
1，通过webpack的outputFileSystem.readFileSync读取处理后的文件

    let webpack = require('webpack');
    let webpackConf = require('./webpack.config');
    webpackConf.debug = true;
    let compiler = webpack(webpackConf);

    app.use(require('koa-webpack-dev-middleware')(compiler,webpackConf.devServer));
    let hotMiddleware = require("webpack-hot-middleware")(compiler);
    
    var layouthtml = compiler.outputFileSystem.readFileSync(compiler.outputPath+'/_layout/layout.hbs')+"";
    var pagehtml = compiler.outputFileSystem.readFileSync(fileurl)+"";    

2，直接字符串替换，hbs中我只用到了layout嵌套，因此，可以放弃handlebars视图引擎 直接

this.type="text/html";
this.body = layouthtml.replace(/\{\{\{body\}\}\}/,pagehtml);

注：

这篇关于webpack-dev-server - webpack-dev-middleware中用html-webpack-plugin 输出页面文件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！