用于在Webpack中启用热式样装入器以同步css的配置

Question

我试图在Webpack中启用热样式装入器，但是我找不到正确的配置。这里是我的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。

下面就来解释它的文档的链接：https://webpack.github.io/docs/stylesheets.html