CODEWITHSUNDEEP
javascripthtmlnode.jswebpackejs
MSzucs
MSzucs

Reputation: 178

EJs to HTML, nodejs, webpack

webpack config:

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

My ejs content is just some lorem ipsum text

My output html is created, but the content of it is not HTML code, it begins like this:

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

How can i return only the html code?

Upvotes: 1

Views: 1632

Answers (2)

Siper
Siper

Reputation: 1195

I'd same problem and i used html-webpack-plugin to convert and deploy html file.

I've used Symfony Encore in my project but you shouln't have problems with change it for yourself:

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();

All what you need now is add plugins what I used above. That's it. Remember that lodash is required.

Edit: I changed EJS loader to ejs-render-loader, because ejs-loader don't support include method. Upgrade above

Upvotes: 1

Kairat Kempirbaev
Kairat Kempirbaev

Reputation: 176

I can't promise but try this instead

npm install ejs-compiled-loader

and change config 

module: {
  loaders: [
    {test: /\.ejs$/, loader: 'ejs-compiled?htmlmin'} // enable here
  ]
},
'ejs-compiled-loader': {
  'htmlmin': true, // or enable here  
  'htmlminOptions': {
    removeComments: true
  }
}

Upvotes: 0

Related Questions