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

时间:2019-05-03 00:17:59

标签: html webpack static-html

问题上下文

我有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.htmlbundle.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文档,它似乎暗示了我在寻找什么: https://webpack.js.org/loaders/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配置的帮助吗?

1 个答案:

答案 0 :(得分:0)

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

    { 使用: [MiniCssExtractPlugin.loader, 'css-loader'] }

  2. 对于文件名模式:[name].[contenthash].bundle.js

  3. 使用 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
       })
    ]}