javascript - webpack-dev-server 未重新编译(JS 文件和 SCSS 文件)
问题描述
早上好,
起起落落,太阳已经高高在上,webpack 毁了我的一天!
我正在使用 webpack-dev-server(通过 packages.json 中的脚本):
"scripts": {
"dev-server": "webpack-dev-server",
}
我用yarn run dev-server 运行
我想要的是在我保存文件时重新编译的代码和刷新的浏览器。我可以接受它不适用于 SCSS 文件的事实,但是在我的组件中的每个更改上“手动”重新编译只是身体上的痛苦。在问这里之前,我尝试了很多在网上找到的解决方案(非详尽列表),但结果总是一样的:
ℹ「wdm」:编译成功
当我修改文件(JS 或 SCSS)时,什么也没有发生。
这是一个简单的 React 应用程序,使用 SCSS 进行样式设置。
这是我的 webpack 配置:
const path = require('path');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const mode = process.env.NODE_ENV || 'development';
module.exports = env => {
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
loader: [
mode === 'development' ? 'style-loader' : MiniCSSExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new MiniCSSExtractPlugin({ filename: 'styles.css' })
],
devtool: env === 'production' ? 'source-map' : 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
publicPath: '/dist/'
}
};
};
这是我尝试过的事情的清单:
- 添加
--output-public-path=/dist/
到脚本 - 将以下内容用于 webpack.config.js 中的 devServer 配置:
host: '0.0.0.0',
contentBase: path.join(__dirname, 'public'),
publicPath: '/dist/',
historyApiFallback: true,
compress: true,
port: 8080,
watchContentBase: true,
inline: true,
hot: true
- 将 HtmlWebpackConfig 与以下配置一起使用:
new HtmlWebpackPlugin({
title: 'Prognostic',
filename: './public/dist/index.html',
template: './public/index.html'
})
- 移除/添加 webpack 和 webpack-dev-server
- 使用全局 webpack-dev-server 而不是项目之一(npm i -g webpack-dev-server)
- 当然还有更多的东西,但我不记得了……哎呀
有关信息,这是我使用的版本:
- Babel-loader@7
- 反应@^16.8.6,
- webpack-dev-server@^3.9.0
- webpack@^4.41.2
所以,我希望发生两件事:
- JS文件更改时自动重新编译
- SCSS 文件更改时自动重新编译(如果可能)
如果你能帮我做到这一点,我会提名你为我的年度圣诞老人开发者(是的,你可以将其添加到你的简历中)
谢谢!
PS:当 Grammarly 告诉我我的文字听起来“友好”时,我笑得很开心
解决方案
Webpack 开发服务器在你的文件上添加一个观察者,以在文件被修改时触发编译。但有时,根据您使用的文本编辑器,这根本不会触发。
我有同样的问题,使用 sublimetext :当我保存我的代码时,webpack 开发服务器不会重建。
因此,我没有使用默认触发机制,而是使用 webpack 的另一个选项:
devServer: {
hot: true,
watchOptions: {
aggregateTimeout: 300,
poll: true
},
}
每 300 毫秒,服务器将检查文件是否已更改,如果是,则重建。
我希望我是你的年度圣诞老人开发者:]
推荐阅读
- css - 避免组件在角度上重叠
- c++ - win 将应用程序 String^ 转换为 int
- python - numpy.random.choice() 无法正常工作
- java - 使用带有未经检查分配的 lambda 的 assertThatThrownBy 时找不到符号
- ssrs-2008 - 在 SSRS 中一起显示矩阵聚合列
- asp.net-core - 使用 ASP.NET Core 中间件在 HTML 文件中注入脚本引用
- perforce - 在 Perforce 中查找并签出特定更改列表的文件
- python - 为 Python 导出 C++ 类
- xamarin - 如何在 Xamarin.Forms 中单击按钮时更改自定义条目浮动标签颜色
- php - 从php中的字符串中提取确切的URL