extract-text-webpack-plugin

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

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

extractCss的得使用最新 的版本 参考地址：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

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

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

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

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

cnpm i -D  css-hot-loader

// 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"]

                })
            )
        }

    ]
}