在 Webpack 中启用 hot style-loader 进行同步的配置 css

Question

我正在尝试在 Webpack 中启用 hot style-loader，但找不到合适的配置。这是我的 webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');

const config = {
    entry: [
        'webpack/hot/dev-server',
        'webpack/hot/only-dev-server',
        path.join(__dirname, '/src/app/app.js'),
    ],
    resolve: {
        extensions: ["", ".js"],
    },
    devServer: {
        contentBase: 'src/www',
        devtool: 'eval',
        hot: true,
        inline: true,
        port: 3232,
        host: '0.0.0.0',
    },
    devtool: 'eval',
    output: {
        path: buildPath,
        filename: 'app.js',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new TransferWebpackPlugin(
            [{ from: 'www' }],
            path.resolve(__dirname, "src")
        ),
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot', 'babel-loader'],
                exclude: [nodeModulesPath],
            },
            {
                test: /\.css$/,
                loader: "style!css",
            },
        ],
    },
    eslint: {
        configFile: '.eslintrc',
    },
};

module.exports = config;

还有我的 package.js 文件：

{
  "name": "test-material-ui",
  "version": "0.0.0-beta.1",
  "description": "Sample project that uses material-ui",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --progress --inline --colors",
    "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --config webpack-production.config.js --progress --colors",
    "lint": "eslint src && echo \"eslint: no lint errors\""
  },
  "private": true,
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "copy-webpack-plugin": "^2.1.3",
    "css-loader": "^0.23.1",
    "eslint": "^2.5.1",
    "eslint-plugin-react": "^4.0.0",
    "html-webpack-plugin": "^2.7.2",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "transfer-webpack-plugin": "^0.1.4",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "flexboxgrid": "^6.3.0",
    "material-ui": "^0.15.0-beta.1",
    "react": "^15.0.1",
    "react-addons-css-transition-group": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-redux": "^4.4.5",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.4.0"
  }
}

但是无论我如何配置它，我都无法使热同步正常工作（对于 .css，对于 .js 文件它工作得很好）！有人可以告诉我正确的方法吗？

Answer 1

确保您在 Javascript 中需要 css。

这里有一个 link 解释它的文档：https://webpack.github.io/docs/stylesheets.html

在 Webpack 中启用 hot style-loader 进行同步的配置 css

Configuration for enabling hot style-loader in Webpack for syncing css

css

webpack

webpack-style-loader

css-loader