Question

早上好

兴高采烈，天空已经升起了阳光，webpack毁了我的一天！

我正在使用webpack-dev-server（通过packages.json中的脚本）：

"scripts": {
    "dev-server": "webpack-dev-server",
 }

我使用 yarn运行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：当语法告诉我我的文字听起来“友好”时，笑得很开心

Answer 1

Webpack开发服务器在文件上添加了监视程序，以在文件被修改后触发编译。不过有时，根据您使用的文本编辑器，这根本不会触发。

使用sublimetext时，我遇到了同样的问题，当我保存代码时，webpackDevServer无法编译。

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

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

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

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

Answer 2

我认为您不需要使用react-hot-loader之类的库才能通过webpack做到这一点

webpack-dev-server无法重新编译（JS文件和SCSS文件）

2 个答案: