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

我正在使用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并且它有效。

您可以复制/粘贴该文件并将其调整到您自己的项目中。我正在试验很多装载机，但只是使用风格！css！sass应该能达到你想要的效果。

Answer 2

在开发模式下，不要使用ExtractTextPlugin，只需使用style-loader（和SASS加载器）。那将给你SASS / CSS热重装。

对于JavaScript，您需要让模块接受更新，热重新加载并不神奇。有关这方面的更多信息，请访问：https://webpack.github.io/docs/hot-module-replacement.html

无法使用babel，webpack和sass进行热重新加载

2 个答案: