在开发的时候,我们不仅仅需要改变js的时候去热更新,改变样式和HTML的时候同样要热更新。
我们知道webpack有loader模块,用来处理样式、图片文件、HTML等等,所以我们先安装样式loader。
npminstallstyle-loader css-loader-D
其中style-loader会生成一个style的标签放到head里面。css-loade会讲css变成模块,也就是可以解析@import等。
安装完成之后,我们需要配置这些模块处理的规则,在moule里面加个rules,rules是数组,然后写上:
这个是有顺序的,执行顺序从后向前,也就是先解析成css然后在插入到HTML。
新建一个css,然后在main.js用require引入css文件,改变css就能热更新了。
我们注意到了,在main.js里面引入css是可以热更新,要是很多css呢,打包之后全部打包进了main.js,这很不合逻辑,我们需要把css抽离出来然后用link引入。
安装插件:
npm install extract-text-webpaxk-plugin@next-D
然后rules配置:
因为我们不是变成style插入,所以不要style-loader。
插件配置:
newExtractTextWebpackPlugin({
filename:'test.[hash:5].css'
})
这样引入之后打包就生成一个单独的css,并用link引入到html。
当你有多个css的时候都要在main里面require,打包之后只会生成一个css。
但是要注意,如果用了这个插件,开发的时候由于是用link引入的,会无法热更新,要直接插入style才能热更新css。至于怎么去配置打包和开发,之后会说。
现在我们只是配置了基础css,还有另外的css预处理器比如sass、less、stylus等要另外配置,都差不多,可以查看webpack官网。
(完)
Coding 个人笔记
领取专属 10元无门槛券
私享最新 技术干货