Части руля не найдены в приложении Express + Webpack - PullRequest
Новая
       59

Части руля не найдены в приложении Express + Webpack

0 голосов
/ 14 июля 2020

Я знаю, что существуют десятки постов с похожими названиями, но я тщательно копался перед публикацией. Мой вопрос: Я неправильно регистрирую свой каталог partials на сервере express?

Это ошибка, которую я вижу:

ERROR in ./src/templates/index.hbs (./node_modules/html-webpack-plugin/lib/loader.js!./src/templates/index.hbs) Module build failed (from ./node_modules/handlebars-loader/index.js): Error: Partial './Slider' not found

Вот настройки моего проекта: 

webpack.dev.config.js
src/index.hbs
src/templates/partials
-- Card.hbs
-- Slider.hbs
src/server
-- server-dev.js

Я использовал HtmlWebpackPlugin, чтобы указать на файл index.hbs и передать шаблон:

webpack.dev.config . js

module.exports = {
  ...
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          emitWarning: true,
          failOnError: false,
          failOnWarning: false
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      { 
        test: /\.(css|sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
          // Translates CSS into CommonJS
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 2,
              sourceMap: true
            }
          },
          // Compiles Sass to CSS
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                indentWidth: 2
              }
            }
          }
        ]})
      },
      {
        test: /\.hbs$/,
        use: [
          {
            loader: 'handlebars-loader',
            options: {
              debug: true,
              partialDirs: path.join(__dirname, 'src/templates/partials')
            }
          }
        ]
      },
      {
       test: /\.(png|svg|jpg|gif)$/,
       use: ['file-loader']
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new HtmlWebPackPlugin({
      template: "./src/templates/index.hbs", // template
      templateParameters: seedData, // json data
      filename: "./index.html",
      excludeChunks: [ 'server' ]
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
};

Эта конфигурация веб-пакета связана с сервером express, который втягивает его таким образом. Я регистрирую частичные данные на сервере, но теперь мне интересно, могу ли я сделать это И указать index.hbs и загрузить данные через сервер express ...

server- dev. js

const app = express();
const DIST_DIR = __dirname;
const HTML_FILE = path.join(DIST_DIR, 'index.html');
const compiler = webpack(config);

hbs.registerPartials(DIST_DIR + '/templates/partials');
app.set('view engine', 'hbs');

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.get('*', (req, res, next) => {
  compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => {
    if (err) {
      return next(err);
    }
    res.set('content-type', 'text/html');
    res.send(result);
    res.end();
  });
});

...

EDIT: Часть index.hbs указывает на Slider.hbs вот так ...

<section>{{> Slider library}}</section>

Заранее спасибо.

...