Question

Webpack显然正在正确地观察更改和重建我的模块，因为当我刷新页面时，任何样式更改都会生效。但是没有刷新，消息只是说App hot update.，但样式不会改变。

这是我的配置;请注意，我们使用SASS并仅使用ExtractTextPlugin进行生产构建。（为简单起见，我已经编辑了我们的生产配置）

module.exports = function(env: {production:boolean}) {

return {
  context: __dirname, // to automatically find tsconfig.json
  resolve: {
    alias: {
      moment: 'moment/moment.js',
    },
    extensions: ['.scss', '.ts', '.js']
  },

  plugins: [
     new webpack.ContextReplacementPlugin(
        /@angular/,
        path.resolve(__dirname, '../src')
        ),
        new CopyWebpackPlugin([
           { from: 'src/static' }
        ]),
        new webpack.HotModuleReplacementPlugin({
        multiStep: true
        }),
        new HappyPack({
              id: 'ts',
              threads: 2,
              loaders: [
                 {
                    path: 'ts-loader',
                    query: { happyPackMode: true }
                 }
              ]
        }),
        new ForkTsCheckerWebpackPlugin()   
  ]

  entry: ['./src/app/main.ts'],
  output: {
    path: path.resolve(__dirname + "/public/"),
    filename: "bundle.js"
  },

  devtool: 'source-map',

  devServer: {

    historyApiFallback: true,
    hot: true,
    inline: false,
    progress: true,
    port: 3000,
    contentBase: 'public',
    proxy: {
      '*': {
        target: 'http://localhost:9657/',
        secure: false
        }
     }
  },

  module: {
    rules: [
        {
        test: /\.svg/,
        loader: 'svg-url-loader',
        options: {}
        },
        {
        test: /\.json$/,
        use: 'json-loader'
        },
        {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
        },
        {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
        },
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: 'style-loader!css-loader?sourceMap!sass-loader?sourceMap&sourceComments'
        } 
    ]
  }
}

Answer 1

热重载通常不起作用，因为它尝试加载something.hot-reload.json

如果它无法获取它那么它将404并且热重新加载将不起作用。在这里，您需要修复webpack请求的路径。

如果没有请求该文件，那么您的配置有问题。

SASS / CSS Hot Reload不使用Webpack 3

1 个答案: