Как импортировать статические активы в статическую HTML-страницу с помощью веб-пакета? - PullRequest
Новая
       33

Как импортировать статические активы в статическую HTML-страницу с помощью веб-пакета?

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

Контекст проблемы

У меня есть веб-пакет для компиляции моего машинописного текста в javascript. Автоматическая перезагрузка работает, когда я меняю свой машинописный код. Тем не менее, webpack не смотрит мой статический html-файл. 

.
├── dist
│   ├── index.html
│   └── style.css
├── src
│   └── index.ts
└── webpack.config.js

Проблема в том, что мне нужно внести несколько изменений в мой index.html, и веб-пакет не обнаруживает эти изменения автоматически. И, если я обновлю html-страницу, она, похоже, сломает webpack-dev-server.

Ожидаемый результат

Я хочу, чтобы все было в папке src, и когда я запускаю webpack, в моей папке dist есть полностью рабочий статический сайт. То есть: 

.                                      .
├── dist                               ├── dist
├── src                                │   ├── index.html
│   ├── index.html                     │   ├── bundle.js
│   ├── index.ts      npx webpack ->   │   └── style.css
│   └── style.css                      ├── src
└── webpack.config.js                  │   ├── index.html
                                       │   ├── index.ts
                                       │   └── style.css 
                                       └── webpack.config.js

Файлы в папке dist могут содержать хэшированные имена файлов. Я пока не беспокоюсь об этом шаге. Я ожидаю, что webpack проверит мои файлы и убедится, что они ссылаются на правильные ресурсы. Поэтому, если бы webpack дал style.css хешированное имя, href в index.html был бы обновлен.

Токовый выход

Мое текущее решение выводит как index.html, так и bundle.js, но Я не могу заставить его скопировать style.css в папку dist. Мой текущий webpack.config.js выглядит так: 

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

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
      contentBase: './dist'
  },
  module: {
      rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.html$/,
            use: [
                { loader: 'file-loader?name=[name].[ext]' },
                { loader: 'extract-loader' },
                { loader: 'html-loader' }
            ]
        }
      ]
  },
  plugins: [
    new CleanWebpackPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

А мой index.html выглядит так: 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>stuff</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="./bundle.js" charset="utf-8"></script>
  </body>
</html>

My index.ts содержит: 

import './index.html';

Что я пробовал

Сначала я попытался просто добавить импорт для моей CSS в index.ts: 

import './style.css';

Но это не сработало. Затем я посмотрел документацию по html-загрузчику, и она, похоже, намекала на то, что я ищу: https://webpack.js.org/loaders/html-loader/ Тем не менее, я читал, что такие встроенные загрузчики устарели, и, просматривая исходный код, кажется, нет никакой опции конфигурации для интерполяции. В любом случае я пытался сделать это, как описано в документации, но он либо просто не работает, либо выдает сообщение об ошибке require, но не может воспроизвести эту ошибку. Мои index.html содержали: 

<link rel="stylesheet" href="${require(`style.css`)">

и index.ts содержат: 

require("html-loader?interpolate=require!./index.html");

Как получить веб-пакет для перемещения моего style.css в папку dist?

У меня есть догадка, я неправильно понимаю, как предполагается использовать веб-пакет. Если у меня что-то работает, могу ли я выложить свою конфигурацию веб-пакета в обмен стека обзора кода, чтобы получить помощь в создании более идиоматичной конфигурации веб-пакета?

...