Webpack第四天

在开发的时候，我们不仅仅需要改变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 个人笔记