Question

当css更改时，我如何重新加载页面？现在当js文件被更改时，实时重新加载工作。我项目的项目结构是

输出 - css（assets / css / main.css）位于此文件夹中，因此index.html

src - 所有反应文件

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Kolaboo</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./assets/css/main.css">
    </head>
    <body>
        <div class="app">
        </div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="./app.js"></script>
    </body>
</html>

webpack.config.js

const path = require('path');
const webpack = require('webpack');

// webpack sets the NODE_ENV when calling it with -p or -d
if (!process.env.NODE_ENV) {
    process.env.NODE_ENV = 'development';
}

const webpackConfig = {
    cache: true,
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'output', 'build'),
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
             test: /\.js$/,
             loader: 'babel-loader',
             exclude: /node_modules/,
             query: {
                    presets: ['es2015', 'react', 'stage-2']
                }
            }, // also adds ES6 support
            {
              test: /\.(png|svg|jpg|jpeg|jpeg|ttf|woff|eot|gif)$/,
              loader: 'url-loader?limit=100000'
            },
            {
              test: /\.css$/,
               loader: 'style-loader!css-loader'
            },
            {
              test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
              loader: 'imports?define=>false&this=>window'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
           'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ],
    resolve: {
        root: path.join(__dirname, 'src'),
        modulesDirectories: ['node_modules']
    },
    devServer: {
  contentBase: './public',
  hot: true,
  historyApiFallback: true
},

};

if (process.env.NODE_ENV === 'production') {
    webpackConfig.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    );
}

module.exports = webpackConfig;

注意：如果我将css文件放在js文件所在的同一位置并使用import'。/ main.css'导入它，它可以工作，但如果我想在index.html中包含css文件则不行。 / p>

css更改时的实时重新加载

0 个答案: