Question

我使用webpack和livereload插件，但是当我更改样式，页面刷新但我不想要它时。

当我使用gulp时，我会更改样式中的任何内容并将其保存，然后在没有页面刷新的情况下重新加载css。

为什么不像webpack上的gulp那样工作？

代码在下面

webpack.config.js

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const WebpackNotifierPlugin = require("webpack-notifier");
const webpack = require("webpack");
const LiveReloadPlugin = require("webpack-livereload-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
    entry: [
        "./resources/js/app.jsx",
        "./resources/scss/app.scss",
    ],
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, "public/assets"),
        filename: "js/app.js",
        publicPath: "/public/assets/"
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env", "react", 'stage-2']
                }
            }
        }, {
            test: /\.(scss)$/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader', "postcss-loader"])
        }]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"]
    },
    watch: true,
    plugins: [
        new CopyWebpackPlugin([{
            from: "node_modules/bootstrap/dist",
            to: "plugins/bootstrap"
        }, , {
            from: 'node_modules/font-awesome/css',
            to: 'plugins/font-awesome/css',
        }, {
            from: 'node_modules/font-awesome/fonts',
            to: 'plugins/font-awesome/fonts',
        }]),
        new WebpackNotifierPlugin({
            alwaysNotify: true
        }),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new LiveReloadPlugin(),
        new ExtractTextPlugin({
            filename: 'css/app.css'
        }),
        new Dotenv({
            path: './.env',
            safe: true
        }),
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ],
    node: {
        fs: "empty"
    }
};

的package.json

"scripts": {
    "start": "webpack-dev-server --history-api-fallback --progress --colors",
    "dev": "cross-env NODE_ENV=development webpack --progress --color",
    "prod": "cross-env NODE_ENV=production webpack -p --progress --color"
  },

我使用＆＃34; npm run dev＆＃34;命令。问题在哪里？

Answer 1

ExtractTextPlugin 遗憾地不支持热模块更换。

从页面插件说明：

没有热模块更换

您需要做的就是在生产中使用该插件。

mediainfo --Inform="Video;%FrameRate%" input.mp4

Answer 2

尝试这样做会有效。

{
   test: /\.(s*)css$/,
   loader: ExtractTextPlugin.extract(['style-loader', 'css-loader', "sass-loader"])
}

如果您共享package.json，那么其他人可以帮助解决问题。

没有页面刷新的webpack重新加载样式

2 个答案: