我正在使用這個插件將所有 CSS 嵌入到最終的 HTML 檔案中。
它會阻止應用程式在開發模式下重繪 。如果我編輯 CSS，構建正常完成，但樣式不會更改，網頁也不會重繪 。只有重新啟動服務器有助于查看更新的 CSS。
有沒有更好的方法將 CSS 嵌入 HTML 檔案中？我試過用 style-loader 來做，如下所示：link。但它沒有正常作業。
我的網路包：
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
inlineSource: '.(js|css)$',
inject: 'body',
});
module.exports = {
entry: ['./src/index.tsx', './src/main.css'],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
fallback: {
"path": require.resolve("path-browserify"),
"os": require.resolve("os-browserify/browser"),
"url": require.resolve("url"),
"tty": require.resolve("tty-browserify"),
"minimatch": require.resolve("minimatch"),
"process": require.resolve("process")
},
},
module: {
rules: [{
test: /\.tsx?$/,
exclude: /node_modules|dist|\.js$|\.d\.ts$/,
loader: 'ts-loader',
options: {
configFile: 'tsconfig.json',
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
],
},
output: {
filename: 'bundle.js',
publicPath: '',
},
plugins: [
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
include: /src/,
failOnError: true,
allowAsyncCycles: false,
cwd: process.cwd(),
}),
new webpack.ProvidePlugin({
process: 'process',
}),
new MiniCssExtractPlugin({
filename: "main.css",
chunkFilename: "mainc.css"
}),
htmlWebpackPlugin,
new HTMLInlineCSSWebpackPlugin(),
new InlineChunkHtmlPlugin(HtmlWebPackPlugin, [/runtime~. [.]tsx/]),
]
};
當我排除新的 HTMLInlineCSSWebpackPlugin() 時，重繪 作業正常。
uj5u.com熱心網友回復：
只需做一點小改動。將配置傳遞HTMLInlineCSSWebpackPlugin()給過濾器的建構式。
new HTMLInlineCSSWebpackPlugin({
filter: (filename) => false
})
如果您使用的是 Typescript，請嘗試。
new HTMLInlineCSSWebpackPlugin({
filter: (filename: string) => false
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/474856.html
標籤：javascript css 反应 网页包