我可以在 webpack 中对 JS 和 SCSS 文件使用热模块替换,并且工作正常,但在尝试热重新加载 html 文件时遇到问题。对我有用的另一个选项是将“watchContentBase:true”属性添加到我的开发服务器属性中,但这会重新加载浏览器。我想要拥有它,这样当我保存文件时,浏览器会更新其内容,而无需完全重新加载页面。
<pre>
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
port: 8080,
contentBase: path.resolve(__dirname, './src'),
hot: true,
open: true,
},
mode: 'development',
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.html$/i,
loader: …Run Code Online (Sandbox Code Playgroud) 我想知道如何将外部 JavaScript 加载到故事书中的特定故事中。我现在能找到的唯一文档是如何在全球范围内执行此操作https://storybook.js.org/docs/react/configure/story-rendering。这样做有效,我只是想节省性能,因为我的故事中只有一个使用外部 js 脚本。