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'
}
]
}
}