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

我最终通过以下设置解决了这个问题。我认为问题与watchpack和webpack dev服务器都在webpack配置中有关-我意识到如果我正在运行webpack dev服务器，则在我的设置中不需要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

2 个答案: