无法通过 babel、webpack 和 sass 使用热重载

Question

我正在尝试使用 webpack-dev-server 为 JS 和 SCSS 文件提供热重载功能，但它没有这样做。我不断收到同样的错误：

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR]  - 381
[HMR] Nothing hot updated.
[HMR] App is up to date.

我已经将我的 /dist/main.css 和 /dist/main.js 文件添加到我的 index.html，剩下的如下：

我的 server.js 是：

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});

我的 webpack.config 文件是：

const sassLoaders = [
  'css-loader?minimize!',
  'postcss-loader',
  'sass-loader?includePaths[]=' + path.resolve(__dirname, './src/css')
]

module.exports = {
    entry: [
      'babel-polyfill',
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      path.normalize(__dirname + '/src/js/main'),
      path.normalize(__dirname + '/src/css/styles.scss')
    ],
    devtool: 'cheap-module-source-map',
    output: {
        filename: '[name].js',
        path: path.join(__dirname, './dist'),
        publicPath: '/dist'
    },
    module: {
        loaders: [
            {
                loader: 'babel',
                test: /\.js$/,
                include: [path.resolve(__dirname, 'src', 'js')],
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015']
                }
            },
            {
              test: /\.scss$/,
              loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new webpack.optimize.UglifyJsPlugin({
          compress: { warnings: false }
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    resolve: {
        extensions: ['', '.js', '.scss'],
        root: [path.join(__dirname, './src')]
    }
};

谢谢！

Answer 1

在开发模式下，不要使用 ExtractTextPlugin，只使用样式加载器（和 SASS 加载器）。这会给你 SASS/CSS 热重载。

对于 JavaScript 你需要让你的模块接受更新，热重载不会神奇地工作。有关更多信息，请参见此处：https://webpack.github.io/docs/hot-module-replacement.html

Answer 2

我一直在使用 webpack 并在使用 sass 的网站上进行热重载，这就是我到目前为止所学到的：

1 - webpack.config.js 有自己的服务器配置 (devServer)，因此如果您不想，则无需创建 server.js 文件。

检查我的 webpack.config.js 文件：

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './app/app.js',
    devServer: {
        inline: true,
        port: 3333
    },
    output: {
        path: './',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { 
                test: /\.js$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                loader: 'babel',
                query: {
                  presets: 'es2015',
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass?sourceMap'
            },
            { test: /\.jpg$/, loader: "file-loader" },
            { test: /\.png$/, loader: "url-loader?mimetype=image/png" },
            {
                test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=assets/fonts/[name].[ext]'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin(
            {
                title: 'My App',
                template: './index.html'
            }
        )
    ]
}

2 - 我使用的不是 ExtractTextPlugin 样式！css!sass 加载程序（您必须使用 npm 安装它们）：

{
   test: /\.scss$/,
   loader: 'style!css!sass?sourceMap'
}

然后我所要做的就是访问 http://localhost:3333 并且它有效。

您可以 copy/paste 该文件并将其调整到您自己的项目中。我正在试验很多加载程序，但仅使用样式！css！sass 应该可以完成您想要的。

无法通过 babel、webpack 和 sass 使用热重载

Fail to use hot reload with babel, webpack and sass

webpack

babeljs

webpack-dev-server