node.js - webpack 在 node服务器使用模板引擎 引入打包好的js问题

问题描述

问 题

webpack 打包出来2个js 我想在ejs中引入这2个js 现在是写死文件名的。

#layout.ejs
<script type="text/javascript" src="/__build__/vendor.js"></script>
<script type="text/javascript" src="/__build__/app.js?v=0.11"></script>

我想要的效果是 webpack 打包出来 [name].[hash:8].js ，但是上面的ejs模板里面应该怎么写呢？

下面这个是我另一个纯前端项目可以这样写，但是上面这个项目用了后台渲染页面。应该怎么写？

{% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
        <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
{% } %}

上面的问题解决了

解决办法：添加HtmlWebpackPlugin插件

new HtmlWebpackPlugin({
    name:'layout',
    template: './server/views/layout.html',
    filename: 'layout.html',
    inject: 'body',
    chunks: ['vendor', 'app']
})

但是又出来新问题了，这样写的话开发环境的html是在内存里的，nodejs的res.render('layout')读不到这个编译好的html啊。。。。

解决方案

可以尝试将模板分成两个目录存放，开发阶段使用views/src/目录，正式访问可以存放到view/dist/下。

然后webpack配置也分开发和正式环境，只有正式环境需要配置HtmlWebpackPlugin插件。

这篇关于node.js - webpack 在 node服务器使用模板引擎 引入打包好的js问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！