Не удается получить html-webpack-inline-source-plugin для встроенного css - PullRequest
Новая
       20

Не удается получить html-webpack-inline-source-plugin для встроенного css

0 голосов
/ 15 октября 2019

Я все читал и до сих пор не понимаю, почему я не могу встроить свой CSS. Нет ошибок сборки. Html-файл компилируется в dist, а встроенные svg работают, но тег css link действительно встроен во время сборки. Любая помощь будет принята с благодарностью. Вот что у меня есть.

webpack.config.js

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin')
const path = require('path')

module.exports = {
  entry: {
    client: ['./src/client/index.js']
  },
  output: {
    path: path.resolve(__dirname, '../..', 'dist', 'client'),
    filename: '[name].js',
    publicPath: '/'
  },
  module: {
    rules: []
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'error.html',
      template: 'src/client/error.html',
      inlineSource: '.(js|css)$' // embed all javascript and css inline
    }),
    new HtmlWebpackInlineSourcePlugin(),
    new HtmlWebpackInlineSVGPlugin({
      runPreEmit: true
    })
  ]
}

error.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Edwin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/client/assets/css/styles.css">
  </head>
  <body>
    <div class="logo">
        <img inline src="src/client/assets/svg/logo.svg">
    </div>
    <div class="error__container">
      <div class="svg__container">
          <img inline src="src/client/assets/svg/server_error.svg">
      </div>
      <div class="info__container">
        <h1 class="error__code">404</h1>
        <h2 class="error__message">Page Not Found</h2>
        <p class="error__desc">The route you have requested could not be resolved</p>
        <div class="back__button">try again</div>
      </div>
    </div>
  </body>
</html>

file structure

src
----client
----|---assets
----|---|---css
----|---|---|---styles.css
----|---|---svg
----|---|---|---logo.svg
----|---|---|---server_error.svg
----|---error.html
----|---index.js
----|---index.html

webpack output

Version: webpack 4.41.0
Child
    Hash: ef7b359fe84d3383bb7b
    Time: 3402ms
    Built at: 10/14/2019 3:25:50 PM
            Asset      Size  Chunks                   Chunk Names
        client.js  4.08 KiB  client  [emitted]        client
    client.js.map  3.51 KiB  client  [emitted] [dev]  client
       error.html  4.99 KiB          [emitted]
    Entrypoint client = client.js client.js.map
    [0] multi ./src/client/index.js 28 bytes {client} [built]
    [./src/client/index.js] 0 bytes {client} [built]
    Child html-webpack-plugin for "error.html":
         1 asset
        Entrypoint undefined = error.html
        [./node_modules/html-webpack-plugin/lib/loader.js!./src/client/error.html] 1.11 KiB {0} [built]
        [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 1 hidden module
...