webpack-dev-server 未重新编译（JS 文件和 SCSS 文件）答案

【问题标题】：webpack-dev-server not recompiling (JS files AND SCSS files)webpack-dev-server 未重新编译（JS 文件和 SCSS 文件）
【发布时间】：2020-04-02 11:36:48
【问题描述】：

早上好，

起起落落，太阳已经高高在上，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
react@^16.8.6,
webpack-dev-server@^3.9.0
webpack@^4.41.2

所以，我希望发生两件事：

JS文件改变时自动重新编译
SCSS 文件更改时自动重新编译（如果可能）

如果你能帮我做到这一点，我会提名你为我的年度圣诞老人开发者（是的，你可以将其添加到你的简历中）

谢谢！

PS：当 Grammarly 告诉我我的文字听起来“友好”时，我笑得很开心

【问题讨论】：

标签： javascript reactjs webpack sass webpack-dev-server

【解决方案1】：

Webpack 开发服务器在你的文件上添加一个观察器，以便在文件被修改时触发编译。但有时，根据您使用的文本编辑器，这根本不会触发。

我有同样的问题，使用 sublimetext ：当我保存我的代码时，webpack 开发服务器不会重建。

所以我没有使用默认的触发机制，而是使用 webpack 的另一个选项：

  devServer: {
    hot: true,
    watchOptions: { 
      aggregateTimeout: 300, 
      poll: true 
    },
  }

每 300 毫秒，服务器会检查文件是否已更改，如果是，则重建。

我希望我是你的年度圣诞老人开发者：]

【讨论】：

哼，这不是我期待的答案。它确实适用于我的 JS 文件，所以这很棒。我正在使用 VSCode，所以我觉得它有这种行为很奇怪。无论如何，谢谢你，亲爱的圣诞老人 Dev！（除非出现更“经典”的解决方案，否则我会将您的解决方案标记为答案）

【解决方案2】：

我认为你不能通过 webpack 做到这一点，你需要使用像 react-hot-loader 这样的库

【讨论】：