Webpack watch 编译我的 scss sass 但不是 webpack-dev-server

Question

我能够使用 webpack --watch 命令通过 webpack 成功编译我的 sass，但它不执行热模块替换。

我可以使用 webpack-dev-server --hot --progress --colors --inline 命令成功执行 HMR，它会重新加载我的 .js 更改，但不是我的 .scss/.css 更改。

我注意到，当我更改 sass 文件时，服务器会刷新，但样式不会更新。我想确保我只用一个命令来做这件事。

这是我的 package.json

的脚本

"scripts": {
    "build": "webpack -p",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --hot --progress --colors --inline"
  },

这是我的整个 webpack 配置：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
const path = require("path");

module.exports = {
  entry: {
    master: "./src/index.jsx"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"],
          publicPath: "dist"
        })
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "master.css",
      allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
    port: 3000,
    host: '0.0.0.0',
    inline: true,
    disableHostCheck: true,
  }
};

并且，如果有必要，这是我的 .babelrc（我使用的是 React）：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "react-hot-loader/babel"
  ]
}

如何让我的 webpack 开发服务器在我更改它们时重新加载我编译的 sass 更改？

Answer 1

您可以查看我的完整配置here

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    })
],
module: {
    rules: [{
            test: /\.scss$/,
            use: [
                'style-loader',
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                        minimize: true,
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader"
                }
            ]
        }
    ]
}

Answer 2

我最终通过以下设置解决了这个问题。我认为这个问题与 watch 和 webpack dev server 都在 webpack 配置中的事实有关 - 我意识到如果我是运行 webpack dev server:[=12，我的设置中不需要 watch 模式=]

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
const path = require("path");

module.exports = {
  entry: {
    master: "./src/index.jsx"
  },
  watch: true,
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"],
          publicPath: "dist"
        })
      },

    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "master.css",
      allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
    port: 3000,
    host: '0.0.0.0',
    inline: true,
    disableHostCheck: true,
    watchOptions: {
      ignored: [
        path.resolve(__dirname, 'node_modules')
      ]
    }
  }
};

和package.json：

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

Webpack watch 编译我的 scss sass 但不是 webpack-dev-server

Webpack watch compiles my scss sass but not webpack-dev-server

sass

reactjs

webpack

babeljs

webpack-hmr