HTML-WebPack-Plugin и EJS: неопределенное свойство htmlWebpackPlugin.options - PullRequest
Новая
       25

HTML-WebPack-Plugin и EJS: неопределенное свойство htmlWebpackPlugin.options

0 голосов
/ 03 мая 2019

Я вижу следующую ошибку и не знаю, почему: 

ERROR in   Error: Child compilation failed:
  Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  > <!DOCTYPE html>
  | <html lang="en">
  |     <head>:
  SyntaxError: Unexpected token (1:0)

  - compiler.js:79 childCompiler.runAsChild
    [testing]/[html-webpack-plugin]/lib/compiler.js:79:16

  - Compiler.js:306 compile
    [testing]/[webpack]/lib/Compiler.js:306:11

  - Compiler.js:631 hooks.afterCompile.callAsync.err
    [testing]/[webpack]/lib/Compiler.js:631:15


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [testing]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:628 compilation.seal.err
    [testing]/[webpack]/lib/Compiler.js:628:31


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [testing]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1329 hooks.optimizeAssets.callAsync.err
    [testing]/[webpack]/lib/Compilation.js:1329:35


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [testing]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1320 hooks.optimizeChunkAssets.callAsync.err
    [testing]/[webpack]/lib/Compilation.js:1320:32


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [testing]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1315 hooks.additionalAssets.callAsync.err
    [testing]/[webpack]/lib/Compilation.js:1315:36


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [testing]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1311 hooks.optimizeTree.callAsync.err
    [testing]/[webpack]/lib/Compilation.js:1311:32


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [testing]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1248 Compilation.seal
    [testing]/[webpack]/lib/Compilation.js:1248:27

  - Compiler.js:625 compilation.finish.err
    [testing]/[webpack]/lib/Compiler.js:625:18

  - Compilation.js:1171 hooks.finishModules.callAsync.err
    [testing]/[webpack]/lib/Compilation.js:1171:4


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [testing]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1163 Compilation.finish
    [testing]/[webpack]/lib/Compilation.js:1163:28

  - Compiler.js:622 hooks.make.callAsync.err
    [testing]/[webpack]/lib/Compiler.js:622:17


  - Compilation.js:1095 _addModuleChain
    [testing]/[webpack]/lib/Compilation.js:1095:12

  - Compilation.js:1007 processModuleDependencies.err
    [testing]/[webpack]/lib/Compilation.js:1007:9

package.json 

{
    "private": true,
    "scripts": {
        "dev": "webpack --mode development",
        "prd": "webpack --mode production"
    },
    "devDependencies": {
        "@babel/core": "^7.4.4",
        "axios": "^0.18.0",
        "babel-loader": "^8.0.5",
        "bootstrap": "^4.0.0",
        "clean-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "datatables.net": "^1.10.19",
        "datatables.net-bs4": "^1.10.19",
        "ejs": "^2.6.1",
        "ejs-compiled-loader": "^1.1.0",
        "ejs-html-loader": "^4.0.1",
        "ejs-loader": "^0.3.3",
        "ejs-render-loader": "^1.0.0",
        "extract-loader": "^3.1.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "jquery": "^3.4.1",
        "jquery-ui": "^1.12.1",
        "mini-css-extract-plugin": "^0.6.0",
        "npm-run-all": "^4.1.5",
        "popper.js": "^1.12",
        "posthtml-cli": "^0.4.9",
        "posthtml-extend": "^0.3.0",
        "posthtml-loader": "^1.0.1",
        "posthtml-modules": "^0.4.2",
        "underscore": "^1.9.1",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.1",
        "webpack-md5-hash": "0.0.6"
    }
}

webpack.config.js 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        'app': 'app.js'
    },
    output: {
        path: __dirname + '/dist'
    },
    resolve: {
        modules: [
            'node_modules',
            path.resolve(__dirname, './')
        ]
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'ejs-html-loader',
                        options: {
                            title: 'TEST2',
                            page: './testing.html',
                            production: process.env.ENV === 'production'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            publicPath: './',
            title: 'TEST1',
            page: './testing.html',
            template: './layout.html',
            filename: 'index.html',
            showErrors: true
        }),
        new WebpackMd5Hash()
    ]
}

app.js 

console.log('App!');

layout.html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>App - <%= title %></title>
    </head>
    <body>
        <%- include(page) %>
    </body>
</html>

testing.html 

<div class="content">
    Hello World!
</div>

Обновление: Мне удалось решить проблему неожиданного токена с помощью следующего, однако по-прежнему существует проблема, где этот ejs-html-loader не может получить доступ к свойствам htmlWebpackPlugin.options.Я понятия не имею, как исправить этот загрузчик, так как практически нет документации о том, как создать загрузчик. 

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    },
                    {
                        loader: 'ejs-html-loader',
                        options: {
                            title: 'TEST2',
                            page: './testing.html',
                            production: process.env.ENV === 'production'
                        }
                    }
                ]
            }
        ]
    },
...