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

Question

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啊。。。。

Answer 1

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

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

Answer 2

@dmyang 感谢。配置方法如下

开发环境配置

#server.ts
var env = config.NODE_ENV || 'development';
if (env === 'development') {
    var webpack = require('webpack');
    var webpackDevMiddleware = require('webpack-dev-middleware');
    var WebpackConfig = require('./webpack.dev.config');
    app.use(errorHandler());
    app.use(webpackDevMiddleware(webpack(WebpackConfig), {
        publicPath: '/__build__/',
        stats: {
            colors: true
        }
    }));
    app.set('views',__dirname + '/server/views/dev');
}else{
    app.set('views',__dirname + '/server/views/dist');
}

app.set('view engine', 'html');
app.engine('.html', require('ejs').__express)

#dev/layout.html
<!--这2个文件,没有hsah值，方便开发-->
<script type='text/javascript' src="/__build__/vendor.js"></script>
<script type='text/javascript' src="/__build__/app.js"></script>
<!--end-->

生产环境配置

#dist/layout.html
不手写引入js 使用HtmlWebpackPlugin插件写入



#webpack.prod.config
new HtmlWebpackPlugin({
    name:'layout',
    template: './server/views/dist/layout.html', //使用生产环境的html
    filename: 'layout.html',
    inject: 'body',
    chunks: ['vendor', 'app'], //这里引入这2个js
    minify:{    
      removeComments:true,    
      collapseWhitespace:false    
    }
  })