webpack打包提取css到独立文件

将本来镶嵌在bundle.js的css转到外面来，我们需要用到一个插件：extract-text-webpack-plugin

使用方法：

1.安装

npm i extract-text-webpack-plugin -D

2.配置

let extractPlugin = require('extract-text-webpack-plugin');

//....
plugins:[
    new extractplugin('css/index.css')
],
module:{
    rules:[
        {
            text: /\.scss$/,
            use: extractPlugin.extract({
                use: ['css-loader','sass-loader'],
                fallback: 'style-loader'
            })
        }
    ]
}

在plugins只是new了一个插件实例，loader部分的fallback就是将style-loader的输出接口接到index.css上。

这样我们就可以将css的代码都取出来放在css/index.css里面了，同时插件能自动添加index.css的引入到html的头部

 

转载于:https://www.cnblogs.com/amiezhang/p/8329412.html