> For the complete documentation index, see [llms.txt](https://sekin.gitbook.io/myjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sekin.gitbook.io/myjs/webpack/extract-text-webpack-plugin.md).

# extract-text-webpack-plugin

webapck4出来后有一些配置改变很大哦，导致不能与以前webapck3的插件使用。比如抽离css的插件extract-text-webpack-plugin【简写为 extractCss】.

现在说的所有插件配置都是基如webapck4的：

**extractCss的得使用最新 的版本 参考地址：**[**https://segmentfault.com/q/1010000014637168**](https://segmentfault.com/q/1010000014637168)

```
cnpm install -D extract-text-webpack-plugin@next

// extract-text-webpack-plugin  ^4.0.0-beta.0
```

关于HMR css的问题：地址：[**http://webpackbook.rails365.net/467674**](http://webpackbook.rails365.net/467674)

**当使用extractCss时，由于抽离出了css,不能热替换css模块了，本来css-loader是自带HMR的，不用自己配置也可以替换。目前有两种解决方法：**

* 当我们在开发环境时，不必要抽离css,反正文件也是保存在内存中，也看不到文件夹的存在。所以不使用**extractCss**,但是在生产环境时得用，为了不在切换环境的时候，手动改代码，**extractCss**里有有个属性**disable(true和false)，开启和关闭。**于是可以利用环境变量来改变这个属性，达到不同状态。这个属性是在webapck.config.js 导出的模块配置的plugins里实例时来设置

```javascript
plugins:[
        new ExtractPlugin({
                filename:"css/[name].css",
                disable:true
        })
]
```

* 要是在开发环境还是要抽离css,可以使用插件 **css-hot-loader** , 用法是在**rules里**使用concat包一下extractCss，具体看

```
cnpm i -D  css-hot-loader
```

```javascript
// webapck.config.js

module:{
    rules:[
        {
            test:/.(css|scss)$/,
            exclude:/node_modules/,
            use:["css-hot-loader"].concat(
                ExtractPlugin({
                    fallback:"style-loader",
                    use:["css-loader","postcss-loader","sass-loader"]

                })
            )
        }

    ]
}
```