前端之家

  1. 首页
  2. 问答

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

• 问答

我可以使用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更改？

w75752 回答：Webpack watch会编译我的scss sass，但不会编译webpack-dev-server

您可以查看我的完整配置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"
                }
            ]
        }
    ]
}
,

我最终通过以下设置解决了这个问题。我认为问题与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": ""
  },
babeljsreactjssasswebpackwebpack-hmr
本文链接：https://www.f2er.com/3089032.html

大家都在问