1
Webpack显然正在正确地观察更改并重建我的模块，因为当我刷新页面时，任何样式更改都会生效。但是如果不提醒，消息只是说App hot update.，但样式不会改变。SASS/CSS Hot Reload不能与Webpack一起使用3
这是我的配置;请注意，我们正在使用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'
}
]
}
}