webpack css单独打包 及extract-text-webpack-plugin插件

主要用到了extract-text-webpack-plugin插件，这是第三方插件，需要单独安装

npm install extract-text-webpack-plugin --save-dev

然后，先在顶部加载：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins中启用该插件：

plugins: [
        ...
        new ExtractTextPlugin("style.min.css"), // 独立 css 插件
    ]

　在文件loader中，添加：

module: {
    	rules: [
            ...
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader"
                })
            }
    	]
}

至此，已经可以实现将css单独打包了，另外还要

注意：暂时不要打开热更新，因为热更新时，生成的静态文件全部放在‘’缓存‘’中的，你会看不到最终效果；

 

参考文章：https://github.com/webpack-contrib/extract-text-webpack-plugin