ejs-html-loader
ejs-html-loader copied to clipboard
Help me, "Error: Child compilation failed"
Hi, I'm still beginner on webpack and now try using ejs loader, but error during compilation.
http://simpana.cloudhub.my/img/temp/ejs.png
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");
const webpack = require('webpack');
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');
//const UglifyJsPlugin = require('uglify-js');
const isProd = process.argv.indexOf('-p') !== -1
//const bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;
const cssDev = ['style-loader', 'css-loader', 'sass-loader'];
const cssProd = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
})
const cssConfig = isProd ? cssProd : cssDev;
module.exports = {
entry: {
app: './src/app.js'
},
output:{
//path: __dirname + '/dist',
path: path.resolve(__dirname, "output"),
filename: 'js/[name].bundle.js'
},
devServer: {
contentBase: path.join(__dirname, "output"),
compress: true,
//port: 5555,
stats:'errors-only',
open: true,
hot: true
},
module: {
rules: [
{
test: /\.scss$/,
use: cssConfig
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.ejs$/,
use: 'ejs-html-loader'
},
{
test: /\.jpe?g|png|gif|svg$/i,
// use: ['file-loader?name=[hash:6].[ext]&outputPath=img/',
// 'image-webpack-loader'
// ]
loaders: [
'file-loader?name=[hash:6].[ext]&outputPath=img/',
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 60
},
gifsicle: {
interlaced: true,
},
pngquant: {
quality: '65-90',
speed: 4
}
}
}
]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("init.bundle.js"),
new HtmlWebpackPlugin({
//title: 'Test',
// minify:{
// collapseWhitespace: true
// },
hash: true,
filename: 'index.html',
template: './src/index.ejs'
}),
new ExtractTextPlugin({
filename: "[name].bundle.css"
}),
// new PurifyCSSPlugin({
// // Give paths to parse for rules. These should be absolute!
// paths: glob.sync(path.join(__dirname, 'src/*.html')),
// }),
new webpack.HotModuleReplacementPlugin()
// new webpack.NamedModulesPlugin()
]
}
package.json
{
"name": "hometutor_lite",
"version": "1.0.0",
"description": "Hometutor Lite Version",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"prod": "npm run clean && webpack -p",
"clean": "rimraf ./output/*"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"css-loader": "^0.28.4",
"ejs": "^2.5.7",
"ejs-html-loader": "^3.1.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.3.1",
"node-sass": "^4.0.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"resolve-url-loader": "^2.1.0",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.1",
"webpack-dev-server": "^2.6.1"
}
}
Thanks..
Same issue happened and solved by changing packages version.
- "ejs": "^2.7.4",
- "ejs-html-loader": "^4.0.1",