Ошибка при использовании частичных файлов с помощью HTML Webpack Plugin

Я пытаюсь создать установку со статическими частицами HTML, используя HTML Webpack Plugin, но столкнувшись с некоторыми ошибками. Это моя текущая конфигурация:

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

    let config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'app.js'
  },
  module: {
    loaders: [{
        test: /\.html$/,
        loader: 'html-loader'
    }],
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: ['css-hot-loader'].concat(ExtractTextWebpackPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader', 'postcss-loader'],
        })),
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/assets/images/&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 4,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: /node_modules/,
        include: __dirname,
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/template.html.ejs'
    }),
    new ExtractTextWebpackPlugin('main.css')
  ],
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
    historyApiFallback: true,
    inline: true,
    open: true
  },
  devtool: 'eval-source-map'
}

module.exports = config;

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin(),
    new OptimizeCSSAssets()
  );
}

template.html.ejs (находится под ./src)

<%=require('./header.html')%>
  <body>
    testing schmesting
  </body>
  <%=require('./footer.html')%>
</html>

(footer.html и header.html расположены под ./src)

Изменить: обновил код, все еще выдает:

"ERROR in Error: Ошибка компиляции детей: Ошибка синтаксического анализа: Неожиданный токен (1: 0) Вам может понадобиться соответствующий загрузчик для обработки этого типа файла.
SyntaxError: Неожиданный токен (1: 0) Ошибка синтаксического анализа: Неожиданный токен (1: 2) Для обработки этого типа файла может потребоваться соответствующий загрузчик.

Ответы

Ответ 1

EDIT

(EDIT: 2017-12-20 переместите "загрузчики" в "правила" )

По умолчанию "html-webpack-plugin" анализирует шаблон как " underscore" (также называемый lodash), ваш "template.html" ничего плохого, ошибка вызвана тем, что веб-пакет не смог разрешить "html-loader" для вашего "template.html" , <%= require('html-loader!./footer.html') %>, поэтому вам нужно установить "html-loader" для webpack и настроить его:

В командной строке:

npm install html-loader

И настройте его для webpack, отредактируйте webpack.config.js:

...
module: {
    rules: [
     // ... 
        {
            test: /\.html$/, // tells webpack to use this loader for all ".html" files
            loader: 'html-loader'
        }
    ]
}

Теперь вы можете запустить "webpack", вы не увидите ошибки, НО > сгенерированный "index.html" не ожидается, потому что ваш файл шаблона имеет расширение ".html", webpack теперь используйте "html-loader" для загрузки "template.html" вместо стандартного "lodash loader", чтобы решить эту проблему, вы можете переименовать "template.html" в "template.html.ejs" (или любое другое расширение), чтобы сделать "html-webpack-plugin". Кроме того, на "template.html" есть немного больше изменений, удалите "html-loader!". от него:

<%= require('./footer.html') %>

теперь он должен работать.

EDIT Отправьте мой код для справки:

/src/template.html.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>template</h1>
        <%=require('./footer.html')%>
    </body>
</html>

/src/footer.html

<footer>this is a footer</footer>

/webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

let config = {
    entry: {
        index: './src/js/index'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/template.html.ejs'
        })
    ]
}


module.exports = config;

/package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.10.0"
  }
}

/src/js/index.js

console.log("A test page!");

окружающая среда:

  • webpack 3.10.0
  • npm 5.6.0

содержимое "/dist/index.html" после запуска webpack:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>template</h1>
        <footer>this is a footer</footer>
    <script type="text/javascript" src="index.js"></script></body>
</html>

Как вы видите, содержимое "footer.html" правильно вставлено.

OLD ANSWER

Подход 1: Использование шаблона "es6"

  • Установите "html-loader" на npm install html-loader
  • Добавьте "html-loader" в ваш "webpack.config.js" для загрузки файлов с расширением ".html", например:
module: {
        rules: [{
            test: /\.html$/,
            loader: 'html-loader'
        }],
    }
  1. Добавить флаг interpolate, чтобы включить синтаксис интерполяции для строк шаблона ES6, например:
plugins: [
        new HtmlWebpackPlugin({
            template: '!!html-loader?interpolate!src/template.html'
        })
    ]
  1. Измените свой template.html в соответствии с шаблоном ES6:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    template
  </body>
  ${require('./footer.html')}
</html>
  1. Запустите webpack, он будет работать

Подход 2: Использование шаблона "подчеркивание"

Следуйте "подходу 1", шаг 1 и 2, а затем:

  • Переименуйте "template.html" в "template.html.ejs"
  • Измените template: './src/template.html' на template: './src/template.html.ejs' в "webpack.config.js"
  • Запустить webpack