Question

问题上下文

我有webpack正在将我的打字稿编译成javascript。更改打字稿代码时，自动重新加载有效。但是，webpack不在监视我的静态html文件。

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

问题是我需要在index.html中进行一些更改，并且webpack不会自动检测到这些更改。而且，如果我刷新html页面，似乎会破坏webpack的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提供一个哈希名称，则index.html中的href将会更新。

当前输出

我当前的解决方案同时输出index.html和bundle.js，但是我无法将其复制到style.css文件夹中。{em> 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>包含：

index.ts

我尝试过的事情

起初，我尝试仅将CSS导入添加到import './index.html';中：

index.ts

但是这没有用。接下来，我查看了html-loader文档，它似乎暗示了我在寻找什么：但是，我读过像这样的内联加载器已被弃用，从源头看，似乎没有用于插值的任何配置选项。我仍然尝试按照文档中的描述进行操作，但是它要么根本不起作用，要么给我一些关于未找到import './style.css';的错误消息（尽管我似乎无法重现该错误）。我的require包含：

index.html

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

index.ts

如何获取webpack来将require("html-loader?interpolate=require!./index.html");移动到dist文件夹？

我有预感，我误解了应该如何使用webpack。当我有工作时，可以将我的webpack配置发布到代码查看堆栈交换中，以获得有关创建更惯用的webpack配置的帮助吗？

Answer 1

创建 CSS 文件时，尝试使用 MiniCssExtractPlugin 将 CSS 写入新文件导入'./style.css'; - 这应该可行，但在 html 的头部内联编写 CSS。

{ 使用: [MiniCssExtractPlugin.loader, 'css-loader'] }
对于文件名模式：[name].[contenthash].bundle.js

使用 HtmlWebpackPlugin 自动更新 [contenthash]

 const plugins = () => {  
   const result =  [
   new HtmlWebpackPlugin({
    template: "./index.html", // this file will be used as html and all css/js will be automaticly included
   })
]}

如何使用webpack在静态html页面中导入静态资产？

1 个答案: