javascript - EJ 到 HTML、nodejs、webpack

Question

网络包配置:

{
    entry: {
        filename: "./test/output.ejs"
    },
    module: {
        loaders: [
            {
                test: /\.ejs$/,
                loader: 'ejs-loader'
            }
        ]
    },
    output: {
        filename: "./test/output.html"
    }
}

我的 ejs 内容只是一些 lorem ipsum 文本

我的输出html已创建，但它的内容不是HTML代码，它是这样开始的:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

如何只返回 html 代码？

Answer 1

我遇到了同样的问题，我使用 html-webpack-plugin 来转换和部署 html 文件。

我在我的项目中使用了 Symfony Encore，但您自己更改它应该不会有问题:

const path = require('path');

const Encore = require('@symfony/webpack-encore'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('./dist/assets')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/dist')

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // JS
    .addEntry('app', './app/index.js')

    .addEntry('vendor', './app/vendor.js')

    // Stylesheet
    .addStyleEntry('global', './assets/styles/index.scss')

    // allow sass/scss files to be processed
    .enableSassLoader()

    // Add ejs loader and plugin depends
    .addLoader({ test: /\.ejs$/, loader: 'ejs-render-loader' })    

    .addPlugin(new webpack.ProvidePlugin({
        // lodash
        '_': 'lodash'
    }))

    .addPlugin(new HtmlWebpackPlugin({
        template: path.join(__dirname, 'app/index.ejs'),
        filename: '../index.html'
    }))

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    .configureBabel(function(babelConfig) {
        babelConfig.presets.push('es2015');
    })


    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

您现在需要的只是添加我上面使用的插件。就是这样。请记住，lodash 是必需的。

编辑:我将 EJS 加载器更改为 ejs-render-loader，因为 ejs-loader 不支持 include 方法。以上升级