javascript - Webpack 开发服务器重新加载但不显示标记或 CSS 更改?
问题描述
所以我对 Webpack 还是很陌生,我终于让 webpack-dev-server 运行起来了。它在保存时重新编译并刷新页面,并显示对我的 JS 代码的更改。但它似乎不适用于我的 SASS 或 HTML 文件?
重新开始时,如果我做出更改,它将显示更改,但如果我撤消该更改,则不会更新。环顾其他帖子,我尝试添加“--hot”标志,并在 webpack 配置中将“内联”添加到我的 devServer。这使它适用于样式更改,但不会显示已删除或撤消的更改。
这是我的 package.json ......
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
"watch": "webpack --watch",
"server": "webpack-dev-server --open --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3"
}
}
这是我的 webpack.config...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');
module.exports = {
entry: './src/javascript/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'bundle.css'
}),
new HtmlWebPackPlugin({
template: './dist/index.html',
filename: 'index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
inline: true,
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images'
}
}
]
},
{
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: !isDevelopment }
}
]
}
]
},
// Default mode is Production. Uses minifying
mode: 'development'
};
我一定有什么不对或不合适的地方吗?
任何帮助或提示将不胜感激。如果需要,将提供更多信息。提前致谢!
解决方案
我通过将“watchContentBase”添加到我的 devServer 找到了解决方案。
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
**watchContentBase: true,**
inline: true,
hot: true
}
推荐阅读
- python - DRF UniqueTogetherValidator及相关模型属性命名问题
- ruby-on-rails - 预编译资产以将 dockerized Rails 5 应用程序部署到 Heroku
- node.js - 全局未在 jest 测试文件中定义
- c++ - 如何最好地处理从 const char * 转换为模板类型
- dataframe - 过滤 pyspark 数据框以获取最近 N 天的行无法正常工作,并在规定日期之前返回一些数据
- powershell - 从函数中检查远程 PowerShell 会话信息
- amazon-web-services - 在 macOS 上使用 NFS 挂载 AWS EFS
- android - 当我们调用 JitsiMeet.closeMeeting() 时 Flutter App 崩溃
- javascript - JavaScript 气球漫画文字识别
- java - 在 Apache CXF 中将“wsu:Created”添加到“wsse:UsernameToken”